Configurations

variables

border-width-s

Since 1.0.0
$border-width-s: 1px !default;

Description

Sets the default border width for small borders.

Type

variable

border-width-m

Since 1.0.0
$border-width-m: 2px !default;

Description

Sets the default border width for medium borders.

Type

variable

border-width-l

Since 1.0.0
$border-width-l: 4px !default;

Description

Sets the default border width for large borders.

Type

variable

border-width-xl

Since 1.0.0
$border-width-xl: 6px !default;

Description

Sets the default border width for extra-large borders.

Type

variable

colors-brand

Since 1.0.0
$colors-brand: (
                    
                    'blue': (
                      'dark': #091C44, // rgb(9, 28, 68)
                      'base': #082B73, // rgb(8, 43, 115)
                      'mid': #004990, // rgb(0, 73, 144)
                      'bright': (
                        'base': #5387F7, // rgb(83, 135, 247)
                        'accessible': #336BE6 // rgb(51, 107, 230)
                      ),
                      'light': #D0DEFD // rgb(208, 222, 253)
                    ),
                    
                    'gold': (
                      'base': #E9BF55 // rgb(233, 191, 85)
                    ),
                    
                    'charcoal': (
                      'base': #605858 // rgb(96, 88, 88)
                    ),
                    
                    'slate': (
                      'base': #B6BDCC, // rgb(182, 189, 204)
                      'light': #E7EAF1 // rgb(231, 234, 241)
                    ),
                    
                    'black': (
                      'base': #000000 // rgb(0, 0, 0)
                    ),
                    
                    'white': (
                      'base': #FFFFFF // rgb(255, 255, 255)
                    )
                    
                  ) !default;

Description

Indentifies the brand's color palette. This map uses a naming scheme compatible with Brandy's color() function.

Type

variable

Map structure

variable key Name variable key Description variable key Type variable key Value
blue

The blue color palette of Emory Libraries

map none
blue.dark

A dark variation of our blue

color
blue.base

Our base blue color

color
blue.mid

A mid variation of our blue

color
blue.bright

A set of bright variations of our blue

map none
blue.bright.base

The base version of the bright variation of our blue

color
blue.bright.accessible

An accessible version of the bright variation of our blue

color
blue.light

A light variation of our blue

color
gold

The gold color palette of Emory Libraries

map none
gold.base

Our base gold color

color
charcoal

The charcoal color palette of Emory Libraries

map none
charcoal.base

Our base charcoal color

color
slate

The slate color palette of Emory Libraries

map none
slate.base

Our base slate color

color
slate.light

A light variation of our slate

color
black

The black color palette of Emory Libraries

map none
black.base

Our base black color

color
white

The white color palette of Emory Libraries

map none
white.base

Our base white color

color

Links

colors-ui

Since 1.0.0
$colors-ui: (
                    
                    'error': (
                      'base': #B82216, // rgb(184, 34, 22)
                      'light': #EABDB9, // rgb(234, 189, 185)
                      'mid': #E61D03,
                      'bright': #FA5555
                    ),
                    
                    'success': (
                      'base': #257611, // rgb(37, 118, 17)
                      'light': #E0F6DA, // rgb(224, 246, 218)
                      'mid': #1DB003,
                      'bright': #6EED57
                    ),
                    
                    'caution': (
                      'base': #AB750C, // rgb(171, 117, 12)
                      'light': #F6E4C1, // rgb(246, 228, 193)
                      'mid': #D69A03,
                      'bright': map-deep-get($colors-brand, 'gold.base')
                    ),
                    
                    'info': (
                      'base': map-deep-get($colors-brand, 'blue.base'),
                      'light': map-deep-get($colors-brand, 'blue.light'),
                      'mid': map-deep-get($colors-brand, 'blue.mid'),
                      'bright': map-deep-get($colors-brand, 'blue.bright.base')
                    )
                    
                  ) !default;

Description

Identifies the user interface color palette. This map uses a naming scheme compatible with the Brandy's color() function.

Type

variable

Map structure

variable key Name variable key Description variable key Type variable key Value
error

Semantic colors for errors

map none
error.base

The base error color

color
error.light

A light variation of the base error color

color
success

Semantic colors for success

map none
success.base

The base success color

color
success.light

A light variation of the base success color

color
caution

Semantic colors for cautions

map none
caution.base

The base caution color

color
caution.light

A light variation of the base caution color

color
info

Semantic colors for information

map none
info.base

The base info color

color
info.light

A light variation of the base info color

color

Links

colors

Since 1.0.0
$colors: map-extend($colors-brand, ('ui': $colors-ui)) !default;

Description

Compiles the complete color set composed of both brand and UI colors.

Type

variable

Requires

brandy-colors-map

Since 1.0.0
$brandy-colors-map: $colors;

Description

Sets the default color map used by Brandy to the chosen color set, making it available through the color() function.

Type

variable

Requires

Links

color-text-dark

Since 1.0.0
$color-text-dark: color('charcoal') !default;

Description

Sets the default color for dark text. This is the font color that will used as our base foreground color over light backgrounds.

Type

variable

color-text-light

Since 1.0.0
$color-text-light: color('white') !default;

Description

Sets the default color for light text. This is the font color that will used as our base foreground color over dark backgrounds.

Type

variable

color-heading

Since 1.0.0
$color-heading: color('blue', 'dark') !default;

Description

Sets the default color for major headings. This is the font color that will used as our base foreground color for headings over light backgrounds.

Type

variable

color-actionable

Since 1.0.0
$color-actionable: color('blue', 'bright', 'accessible') !default;

Description

Sets the default color for actionable text. This is the font color that will used as our base foreground color for things like links and buttons when over light backgrounds.

Type

variable

brandy-dark-text

Since 1.0.0
$brandy-dark-text: $color-text-dark;

Description

Defines the default dark text color used by Brandy's color-contrast() function.

Type

variable

Requires

Links

brandy-light-text

Since 1.0.0
$brandy-light-text: $color-text-light;

Description

Defines the default light text color used by Brandy's color-contrast() function.

Type

variable

Requires

Links

config

Since 1.0.0
$config: (
                  
                    'path': (
                      'icons': '../icons',
                      'fonts': '../fonts'
                    )
                  
                  );

Description

Indentifies the configuration set. This map uses a schema compatible with Brandy's config() function.

Type

variable

Map structure

variable key Name variable key Description variable key Type variable key Value
path

A set of paths

map none
path.icons

The path to the icons directory

string

Links

brandy-config-map

Since 1.0.0
$brandy-config-map: $config;

Description

Sets the default configuration map used by Brandy to the chosen configuration set, making it available through the config() function.

Type

variable

Requires

Links

fonts

Since 1.0.0
$fonts: (
                  
                    'heading': (
                      'h1': ('Cardo', serif),
                      'h1-alt': ('Cardo', serif),
                      'h1-hero': ('Cardo', serif),
                      'h2': ('Cardo', serif),
                      'h3': ('Open Sans', sans-serif),
                      'h4': ('Cardo', serif),
                      'h5': ('Cardo', serif),
                      'h5-alt': ('Open Sans', sans-serif),
                      'h6': ('Open Sans', sans-serif)
                    ),
                    
                    'body': ('Open Sans', sans-serif),
                    
                    'body-alt': ('Open Sans', sans-serif),
                    
                    'lead': ('Cardo', serif),
                    
                    'blockquote': ('Cardo', serif),
                    
                    'button': ('Open Sans', sans-serif),
                    
                    'badge': ('Open Sans', sans-serif),
                    
                    'listing': ('Cardo', serif),
                    
                    'accent': ('Cardo', serif),
                    
                    'label': ('Open Sans', sans-serif),
                    
                    'data': ('Open Sans', sans-serif),
                    
                    'caption': ('Cardo', serif)
                  
                  ) !default;

Description

Indentifies the brand's font set. This map uses a naming scheme compatible with Brandy's font() function.

Type

variable

Map structure

variable key Name variable key Description variable key Type variable key Value
heading

A collection of fonts used for headings

map none
heading.h1

The default font for H1 headings

font
heading.h2

The default font for H2 headings

font
heading.h3

The default font for H3 headings

font
heading.h4

The default font for H4 headings

font
heading.h5

The default font for H5 headings

font
heading.h6

The default font for H6 headings

font
heading.topic

The default font for headings that represent topic shifts within body content

font
body

The default font for body text

font
blockquote

The default font for blockquotes

font
button

The default font for button text

font
headline

The default font for headlines

font
listing

The default font for listing items

font
accent

The default font used for accent text

font

Links

brandy-fonts-map

Since 1.0.0
$brandy-fonts-map: $fonts;

Description

Sets the default font map used by Brandy to the chosen font set, making it available through the font() function.

Type

variable

Requires

Links

font-size

Since 1.0.0
$font-size: 16px !default;

Description

Sets the default font size for all text within the project. This is the font size that will used as our base for 1(r)em.

Type

variable

font-line-height

Since 1.0.0
$font-line-height: 1.9375 !default;

Description

Sets the default line height for all text within the project. This is the line height that will used as our base for other line heights.

Type

variable

brandy-font-size

Since 1.0.0
$brandy-font-size: $font-size;

Description

Sets the default font size used by Brandy to the chosen font size for use with resizing functions.

Type

variable

Requires

fonts-scale

Since 1.0.0
$fonts-scale: (
                    
                    'heading': (
                      'h1': 4.5,        // 72px
                      'h1-alt': 3,      // 48px
                      'h1-hero': 3.125, // 50px
                      'h2': 3,          // 48px
                      'h3': 1.5,        // 24px
                      'h4': 1.75,       // 28px
                      'h5': 1.625,      // 26px
                      'h5-alt': 1.375,  // 22px
                      'h6': .75,        // 12px
                    ),
                    
                    'body': 1,          // 16px
                    
                    'body-alt': .875,   // 14px
                    
                    'lead': 1.75,       // 28px
                    
                    'blockquote': 3,    // 48px
                    
                    'button': .6875,    // 11px
                    
                    'badge': .75,       // 12px
                    
                    'listing': 1.375,   // 22px
                    
                    'accent': 1.125,    // 18px
                    
                    'label': .625,      // 10px
                    
                    'data': .75,        // 12px,
                    
                    'caption': 1        // 16px
                    
                  ) !default;

Description

Determines the scale for various fonts based on the default font size. This map should be identical to the fonts map but use ratios to represent the font's size as a percentage of our default font size.

Type

variable

layout-y-min

Since 1.0.0
$layout-y-min: 40px !default;

Description

Sets the minimum vertical layout spacing.

Type

variable

layout-y-max

Since 1.0.0
$layout-y-max: 70px !default;

Description

Sets the maximum vertical layout spacing.

Type

variable

layout-x-min

Since 1.0.0
$layout-x-min: 20px !default;

Description

Sets the minimum horizontal layout spacing.

Type

variable

layout-x-max

Since 1.0.0
$layout-x-max: 170px !default;

Description

Sets the maximum horizontal layout spacing.

Type

variable

layout-scale-y

Since 1.0.0
$layout-scale-y: layout-scale($layout-y-min, $layout-y-max) !default;

Description

Sets vertical layout scale for resizing layouts across breakpoints.

Type

variable

Requires

layout-scale-x

Since 1.0.0
$layout-scale-x: layout-scale($layout-x-min, $layout-x-max) !default;

Description

Sets horizontal layout scale for resizing layouts across breakpoints.

Type

variable

Requires

layout-y

Since 1.0.0
$layout-y: layout-breakpoints($layout-scale-y) !default;

Description

Sets layout spacing accross breakpoint.

Type

variable

Requires

layout-x

Since 1.0.0
$layout-x: layout-breakpoints($layout-scale-x) !default;

Description

Sets layout spacing accross breakpoint.

Type

variable

Requires

rhythm-y

Since 1.0.0
$rhythm-y: 2em !default;

Description

Sets the default vertical rhythm.

Type

variable

rhythm-x

Since 1.0.0
$rhythm-x: 1em !default;

Description

Sets the default horizontal rhythm.

Type

variable

screen-s

Since 1.0.0
$screen-s: 600px !default;

Description

Sets the breakpoint for small screens. This number should represent a breakpoint that includes the most common screen sizes for mobile devices when in potrait mode. This breakpoint should also represent the smallest typical screen size for tablets in portrait mode.

Type

variable

screen-m

Since 1.0.0
$screen-m: 900px !default;

Description

Sets the breakpoint for medium screens. This number should represent a breakpoint that includes the most common screen sizes for tablet devices when in portrait mode. This breakpoint should also represent the smallest typical screen size for tablets in landscape mode.

Type

variable

screen-l

Since 1.0.0
$screen-l: 1200px !default;

Description

Sets the breakpoint for large screens. This number should represent a breakpoint that includes the most common screen sizes for tablet devices when in landscape mode. This breakpoint should also represent the smallest typical screen size for laptops and desktops.

Type

variable

screens

Since 1.0.0
$screens: (
                    
                    's': max-width $screen-s,
                    'm': ($screen-s + 1) $screen-m,
                    'l': min-width ($screen-m + 1),
                    'xl': min-width $screen-l
                    
                  ) !default;

Description

Compiles our commonly used breakpoints into a range that can used with Breakpoint to easily build @media queries. This map uses a schema compatible with Brandy's screen() function.

Type

variable

Map structure

variable key Name variable key Description variable key Type variable key Value
s

The main breakpoint for small screens

mixed
m

The main breakpoint for medium screens

mixed
l

The main breakpoint for large screens

mixed
xl

The main breakpoint for extra-large screens

mixed

Requires

Links

brandy-screens-map

Since 1.0.0
$brandy-screens-map: $screens;

Description

Sets the default screens map used by Brandy to the chosen set of breakpoints, making it available through the screen() function.

Type

variable

Requires

Links

transition-duration

Since 1.0.0
$transition-duration: .25s !default;

Description

Sets the default transition duration.

Type

variable

transition-timing

Since 1.0.0
$transition-timing: ease !default;

Description

Sets the default transition timing.

Type

variable

transition-all

Since 1.0.0
$transition-all: all $transition-duration $transition-timing !default;

Description

Sets the default transition all.

Type

variable

z

Since 1.0.0
$z: (
                    
                    'lost': -99999,
                    
                    'below': -1,
                    
                    'default': auto,
                    
                    'above': 1,
                    
                    'docked': 5,
                    
                    'dropdown': 10,
                    
                    'modal': 100,
                    
                    'popup': 500,
                    
                    'spinner': 1000,
                    
                    'alert': 2000
                    
                  ) !default;

Description

Indentifies z-index layers. This map uses a schema compatible with Brandy's z() function.

Type

variable

Map structure

variable key Name variable key Description variable key Type variable key Value
lost none number
below none number
default none number
above none number
docked none number
dropdown none number
modal none number
popup none number
spinner none number
alert none number

Links

brandy-z-map

Since 1.0.0
$brandy-z-map: $z;

Description

Sets the default z-index layer map used by Brandy to the chosen z-index map, making it available through the z() function.

Type

variable

Requires

Links

Core

css

body

body { ... }

Description

Initializes core body styles.

*

* { ... }

Description

Resets the positioning and box model for all elements.

Patterns

Atoms

badge

mixins

atoms-badge review

Since 1.0.0
@mixin atoms-badge($custom) { ... }

Description

Builds a constructor for the badge component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our badge component

Requires

atoms-badge--theme

Since 1.0.0
@mixin atoms-badge--theme($skin) { ... }

Description

Defines the badge component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The badge component's themeable properties

Requires

variables

atoms-badge

Since 1.0.0
$atoms-badge: (
                                
                                'background': color('gold'),
                                'foreground': color('blue'),
                                'edge': (
                                  'size': 5px,
                                  'angle': 3deg
                                ),
                                'radius': 4px
                                
                              );

Description

Defines the base skin of the badge component.

Type

variable

placeholders

atoms-badge

Since 1.0.0
%atoms-badge { ... }

Description

Defines the base structure of the badge component.

Requires

button

mixins

atoms-button review

Since 1.0.0
@mixin atoms-button($custom) { ... }

Description

Builds a constructor for the button component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our button component

Requires

atoms-button--theme

Since 1.0.0
@mixin atoms-button--theme($skin) { ... }

Description

Defines the button component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The button component's themeable properties

Requires

variables

atoms-button

Since 1.0.0
$atoms-button: (
                              
                                'size': 50px,
                                'padding': 25px,
                                'background': (
                                  'normal': $color-actionable,
                                  'hover': color('blue', 'mid'),
                                  'active': color('blue', 'mid'),
                                  'hollow': color('blue', 'light')
                                ),
                                'foreground': (
                                  'normal': $color-text-light,
                                  'hover': $color-text-light,
                                  'active': $color-text-light,
                                  'hollow': $color-actionable
                                ),
                                'fade': .5,
                                'border': $border-width-s,
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                ),
                                'icon': (
                                  'offset': $rhythm-x
                                ),
                                'group': (
                                  'gap': (
                                    'x': 15px,
                                    'y': 15px
                                  )
                                )
                                
                              );

Description

Defines the base skin of the button component.

Type

variable

Map structure

variable key Name variable key Description variable key Type variable key Value
color

Assigns the component's color properties

map none
color.normal

The component's normal color

color
color.normal

The component's color on hover/focus

color
border

The component's border width

number
transition

Assigns the component's transition properties

map none
transition.duration

The component's transition duration

number
transition.timing

The component's transition timing

number

Requires

placeholders

atoms-button

Since 1.0.0
%atoms-button { ... }

Description

Defines the base structure of the button component.

Requires

callout

mixins

atoms-callout review

Since 1.0.0
@mixin atoms-callout($custom) { ... }

Description

Builds a constructor for the callout component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our callout component

Requires

atoms-callout--theme

Since 1.0.0
@mixin atoms-callout--theme($skin) { ... }

Description

Defines the callout component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The callout component's themeable properties

Requires

variables

atoms-callout

Since 1.0.0
$atoms-callout: (
                                
                                'background': color('slate', 'light'),
                                'padding': (
                                  'x': 50px,
                                  'y': 50px
                                ),
                                'border': (
                                  'color': rgba(color('charcoal'), .2),
                                  'thickness': $border-width-s,
                                  'offset': 15px
                                ),
                                'spacing': $rhythm-y
                                
                              );

Description

Defines the base skin of the callout component.

Type

variable

placeholders

atoms-callout

Since 1.0.0
%atoms-callout { ... }

Description

Defines the base structure of the callout component.

copyright

mixins

variables

placeholders

image

mixins

atoms-image review

Since 1.0.0
@mixin atoms-image($custom) { ... }

Description

Builds a constructor for the image component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our image component

Requires

atoms-image--theme

Since 1.0.0
@mixin atoms-image--theme($skin) { ... }

Description

Defines the image component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The image component's themeable properties

Requires

variables

atoms-image

Since 1.0.0
$atoms-image: (
                                
                                'widths': (
                                  'quarter':        25%,
                                  'third':          33.333%,
                                  'half':           50%,
                                  'two-third':      66.667%,
                                  'three-quarter':  75%,
                                  'full':           100%,
                                  'auto':           auto
                                ),
                                
                                'spacing': 1em
                                
                              );

Description

Defines the base skin of the image component.

Type

variable

placeholders

atoms-image

Since 1.0.0
%atoms-image { ... }

Description

Defines the base structure of the image component.

input

mixins

atoms-input review

Since 1.0.0
@mixin atoms-input($custom) { ... }

Description

Builds a constructor for the input component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our input component

Requires

atoms-input--theme

Since 1.0.0
@mixin atoms-input--theme($skin) { ... }

Description

Defines the input component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The input component's themeable properties

Requires

variables

atoms-input

Since 1.0.0
$atoms-input: (
                                
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': color('slate')
                                ),
                                'radius': 5px,
                                'alpha': .5,
                                'shadow': inset 1px 2px 4px rgba(color('slate'), .5),
                                'padding': (
                                  'x': 20px,
                                  'y': 10px
                                ),
                                'spacing': $rhythm-y,
                                'foreground': $color-text-dark,
                                'background': color('white'),
                                'icon': (
                                  'color': color('blue', 'bright'),
                                  'size': 20px,
                                  'spacing': 20px
                                ),
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                ),
                                'state': (
                                  'toggle': (
                                    'default': false,
                                    'checked': color('blue')
                                  ),
                                  'select': (
                                    'default': false,
                                    'focused': color('slate', 'light')
                                  ),
                                  'text': (
                                    'default': false,
                                    'focused': color('blue', 'bright'),
                                    'valid': color('ui', 'success'),
                                    'invalid': color('ui', 'error')
                                  )
                                ),
                                'label': (
                                  'color': color('blue', 'dark'),
                                  'spacing': (
                                    'x': ($rhythm-x / 2),
                                    'y': ($rhythm-y / 2)
                                  )
                                ),
                                'checkbox': (
                                  'size': 15px,
                                  'buffer': 2.5px
                                ),
                                'radio': (
                                  'size': 15px,
                                  'buffer': 2.5px,
                                  'fill': 40%,
                                  'diffuse': 5%
                                ),
                                'field': (
                                  'spacing': $rhythm-y,
                                  'padding': 20px
                                ),
                                'container': (
                                  'rows': 2,
                                  'columns': 2,
                                  'gap': $rhythm-x
                                ),
                                'search': (
                                  'big': (
                                    'font-family': font('accent'),
                                    'font-size': 1.56em,
                                    'line-height': 1.5
                                  ),
                                  'small': (
                                    'font-family': font('body'),
                                    'font-size': .78em,
                                    'line-height': 1.7857
                                  )
                                ),
                                'select': (
                                  'inline': (
                                    'border': (
                                      'thickness': $border-width-s,
                                      'color': color('blue', 'bright')
                                    ),
                                    'padding': (
                                      'x': 0px,
                                      'y': 0px
                                    ),
                                    'icon': (
                                      'color': color('blue', 'bright'),
                                      'size': 30px,
                                      'spacing': 10px
                                    )
                                  )
                                )
                                
                              );

Description

Defines the base skin of the input component.

Type

variable

placeholders

atoms-input

Since 1.0.0
%atoms-input { ... }

Description

Defines the base structure of the input component.

Requires

list

mixins

atoms-list review

Since 1.0.0
@mixin atoms-list($custom) { ... }

Description

Builds a constructor for the list component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our list component

Requires

atoms-list--theme

Since 1.0.0
@mixin atoms-list--theme($skin) { ... }

Description

Defines the list component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The list component's themeable properties

Requires

variables

atoms-list

Since 1.0.0
$atoms-list: (
                              
                                'marker': (
                                  'offset': 25px
                                ),
                              
                                'bulleted': (
                                  'marker': (
                                    'style': 'â– ',
                                    'color': color('blue', 'bright')
                                  )
                                ),
                              
                                'numbered': (
                                  'marker': (
                                    'style': decimal,
                                    'period': true,
                                    'color': color('blue', 'bright')
                                  )
                                ),
                              
                                'topics': (
                                  'delimiter': ','
                                ),
                              
                                'files': (
                                  'gap': 10px
                                )
                              
                              );

Description

Defines the base skin of the list component.

Type

variable

placeholders

atoms-list

Since 1.0.0
%atoms-list { ... }

Description

Defines the base structure of the list component.

map

mixins

atoms-map review

Since 1.0.0
@mixin atoms-map($custom) { ... }

Description

Builds a constructor for the map component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our map component

Requires

atoms-map--theme

Since 1.0.0
@mixin atoms-map--theme($skin) { ... }

Description

Defines the map component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The map component's themeable properties

Requires

variables

atoms-map

Since 1.0.0
$atoms-map: (
                                
                                'width': 100%,
                                'height': 25%
                                
                              );

Description

Defines the base skin of the map component.

Type

variable

placeholders

atoms-map

Since 1.0.0
%atoms-map { ... }

Description

Defines the base structure of the map component.

nav-button

mixins

atoms-nav-button review

Since 1.0.0
@mixin atoms-nav-button($custom) { ... }

Description

Builds a constructor for the nav-button component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our nav-button component

Requires

atoms-nav-button--theme

Since 1.0.0
@mixin atoms-nav-button--theme($skin) { ... }

Description

Defines the nav-button component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The nav-button component's themeable properties

Requires

atoms-nav-button--state

Since 1.0.0
@mixin atoms-nav-button--state($state, $skin) { ... }

Description

Defines the nav-button component state.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$state

The component's state to be styled

string none
$skin

The component's skin

map none

Output

The nav-button component's themeable properties

Requires

atoms-nav-button--state--structure

Since 1.0.0
@mixin atoms-nav-button--state--structure($state) { ... }

Description

Defines the nav-button component state structure.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$state

The component's state to be structure

string none

Output

The nav-button component's themeable properties

Requires

variables

atoms-nav-button

Since 1.0.0
$atoms-nav-button: (
                              
                                'main': (
                                  'foreground': (
                                    'normal': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': color('blue', 'dark')
                                    ),
                                    'hover': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': $color-actionable
                                    ),
                                    'active': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': $color-actionable
                                    )
                                  ),
                                  'background': (
                                    'normal': (
                                      's': color('blue', 'dark'),
                                      'm': color('blue', 'dark'),
                                      'l': color('white')
                                    ),
                                    'hover': (
                                      's': color('blue'),
                                      'm': color('blue'),
                                      'l': color('white')
                                    ),
                                    'active': (
                                      's': color('blue'),
                                      'm': color('blue'),
                                      'l': color('white')
                                    )
                                  ),
                                  'font': (
                                    'font-family': font('body'),
                                    'font-weight': bold,
                                    'font-style': normal,
                                    'font-size': (
                                      's': $font-size,
                                      'm': $font-size,
                                      'l': 14px
                                    ),
                                    'line-height': (
                                      's': 2.0625,
                                      'm': 2.0625,
                                      'l': 1.5
                                    ),
                                    'text-transform': (
                                      's': none,
                                      'm': none,
                                      'l': none
                                    ),
                                    'letter-spacing': (
                                      's': normal,
                                      'm': normal,
                                      'l': normal
                                    )
                                  ),
                                  'border': (
                                    'thickness': $border-width-s,
                                    'color': color('slate', 'light')
                                  ),
                                  'indicator': (
                                    'size': 8px,
                                    'color': color('gold'),
                                    'border': (
                                      'thickness': $border-width-l,
                                      'color': color('blue', 'dark')
                                    )
                                  )
                                ),
                              
                                'utility': (
                                  'foreground': (
                                    'normal': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': color('blue', 'mid')
                                    ),
                                    'hover': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': $color-actionable
                                    ),
                                    'active': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': $color-actionable
                                    )
                                  ),
                                  'background': (
                                    'normal': (
                                      's': color('blue', 'dark'),
                                      'm': color('blue', 'dark'),
                                      'l': color('white')
                                    ),
                                    'hover': (
                                      's': color('blue'),
                                      'm': color('blue'),
                                      'l': color('white')
                                    ),
                                    'active': (
                                      's': color('blue'),
                                      'm': color('blue'),
                                      'l': color('white')
                                    )
                                  ),
                                  'font': (
                                    'font-family': font('body'),
                                    'font-weight': bold,
                                    'font-style': normal,
                                    'font-size': (
                                      's': $font-size,
                                      'm': $font-size,
                                      'l': 11px
                                    ),
                                    'line-height': (
                                      's': 2.0625,
                                      'm': 2.0625,
                                      'l': 1.6364
                                    ),
                                    'text-transform': (
                                      's': normal,
                                      'm': normal,
                                      'l': uppercase
                                    ),
                                    'letter-spacing': (
                                      's': none,
                                      'm': none,
                                      'l': 0.05em
                                    )
                                  )
                                ),
                              
                                'flyout': (
                                  'foreground': (
                                    'normal': (
                                      's': color('blue', 'mid'),
                                      'm': color('blue', 'mid'),
                                      'l': color('blue', 'mid')
                                    ),
                                    'hover': (
                                      's': $color-actionable,
                                      'm': $color-actionable,
                                      'l': $color-actionable
                                    ),
                                    'active': (
                                      's': $color-actionable,
                                      'm': $color-actionable,
                                      'l': $color-actionable
                                    )
                                  ),
                                  'background': (
                                    'normal': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': color('white')
                                    ),
                                    'hover': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': color('white')
                                    ),
                                    'active': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': color('white')
                                    )
                                  ),
                                  'font': (
                                    'font-family': font('body'),
                                    'font-weight': bold,
                                    'font-style': normal,
                                    'font-size': (
                                      's': 9px,
                                      'm': 11px,
                                      'l': 11px
                                    ),
                                    'line-height': (
                                      's': 1.6667,
                                      'm': 1.6364,
                                      'l': 1.6364
                                    ),
                                    'text-transform': (
                                      's': uppercase,
                                      'm': uppercase,
                                      'l': uppercase
                                    ),
                                    'letter-spacing': (
                                      's': 0.05em,
                                      'm': 0.05em,
                                      'l': 0.05em
                                    )
                                  ),
                                  'icon': (
                                    'size': (
                                      's': 14px,
                                      'm': 14px,
                                      'l': 14px
                                    )
                                  )
                                ),
                              
                                'search': (
                                  'foreground': (
                                    'normal': (
                                      's': color('blue', 'dark'),
                                      'm': color('blue', 'dark'),
                                      'l': color('blue', 'dark')
                                    ),
                                    'hover': (
                                      's': $color-actionable,
                                      'm': $color-actionable,
                                      'l': $color-actionable
                                    ),
                                    'active': (
                                      's': $color-actionable,
                                      'm': $color-actionable,
                                      'l': $color-actionable
                                    )
                                  ),
                                  'background': (
                                    'normal': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': color('white')
                                    ),
                                    'hover': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': color('white')
                                    ),
                                    'active': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': color('white')
                                    )
                                  ),
                                  'font': (
                                    'font-family': font('body'),
                                    'font-weight': bold,
                                    'font-style': normal,
                                    'font-size': (
                                      's': 12px,
                                      'm': initial,
                                      'l': initial
                                    ),
                                    'line-height': (
                                      's': 1.6667,
                                      'm': initial,
                                      'l': initial
                                    ),
                                    'text-transform': (
                                      's': uppercase,
                                      'm': none,
                                      'l': none
                                    ),
                                    'letter-spacing': (
                                      's': 0.05em,
                                      'm': normal,
                                      'l': normal
                                    )
                                  ),
                                  'icon': (
                                    'size': (
                                      's': 17px,
                                      'm': 17px,
                                      'l': 17px
                                    )
                                  ),
                                  'padding': (
                                    'x': (
                                      's': false,
                                      'm': false,
                                      'l': false
                                    ),
                                    'y': (
                                      's': 10px,
                                      'm': unset,
                                      'l': unset
                                    )
                                  )
                                ),
                              
                                'librarian': (
                                  'foreground': (
                                    'normal': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': color('blue', 'mid')
                                    ),
                                    'hover': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': $color-actionable
                                    ),
                                    'active': (
                                      's': color('white'),
                                      'm': color('white'),
                                      'l': $color-actionable
                                    )
                                  ),
                                  'background': (
                                    'normal': (
                                      's': $color-actionable,
                                      'm': $color-actionable,
                                      'l': color('white')
                                    ),
                                    'hover': (
                                      's': color('blue', 'mid'),
                                      'm': color('blue', 'mid'),
                                      'l': color('white')
                                    ),
                                    'active': (
                                      's': color('blue', 'mid'),
                                      'm': color('blue', 'mid'),
                                      'l': color('white')
                                    )
                                  ),
                                  'font': (
                                    'font-family': font('body'),
                                    'font-weight': bold,
                                    'font-style': normal,
                                    'font-size': (
                                      's': 11px,
                                      'm': 11px,
                                      'l': 11px
                                    ),
                                    'line-height': (
                                      's': normal,
                                      'm': 1.6364,
                                      'l': 1.6364
                                    ),
                                    'text-transform': (
                                      's': uppercase,
                                      'm': uppercase,
                                      'l': uppercase
                                    ),
                                    'letter-spacing': (
                                      's': 0.05em,
                                      'm': 0.05em,
                                      'l': 0.05em
                                    )
                                  ),
                                  'icon': (
                                    'size': (
                                      's': 24px,
                                      'm': 24px,
                                      'l': 14px
                                    )
                                  )
                                ),
                              
                                'toggle': (
                                  'foreground': (
                                    'normal': color('blue', 'dark'),
                                    'hover': $color-actionable,
                                    'active': $color-actionable
                                  ),
                                  'background': (
                                    'normal': color('white'),
                                    'hover': color('white'),
                                    'active': color('white')
                                  ),
                                  'font': (
                                    'font-family': font('body'),
                                    'font-weight': bold,
                                    'font-style': normal,
                                    'font-size': (
                                      's': 11px,
                                      'm': 11px,
                                      'l': 0
                                    ),
                                    'line-height': (
                                      's': 1.6364,
                                      'm': 1.6364,
                                      'l': 0
                                    ),
                                    'text-transform': (
                                      's': uppercase,
                                      'm': uppercase,
                                      'l': none
                                    ),
                                    'letter-spacing': (
                                      's': .05em,
                                      'm': .05em,
                                      'l': normal
                                    )
                                  ),
                                  'icon': (
                                    'size': (
                                      's': 24px,
                                      'm': 24px,
                                      'l': 0
                                    )
                                  ),
                                  'padding': (
                                    'x': (
                                      's': false,
                                      'm': false,
                                      'l': false
                                    ),
                                    'y': (
                                      's': 10px,
                                      'm': 10px,
                                      'l': false
                                    )
                                  )
                                ),
                              
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                ),
                                'icon': (
                                  'offset': ($rhythm-x / 2)
                                ),
                                'arrow': (
                                  'color': color('slate'),
                                  'size': 24px
                                ),
                                'padding': (
                                  'x': (
                                    's': 10px,
                                    'm': 10px,
                                    'l': 15px,
                                    'xl': 25px
                                  ),
                                  'y': (
                                    's': false,
                                    'm': false,
                                    'l': false,
                                    'xl': false
                                  )
                                )
                              
                              );

Description

Defines the base skin of the nav-button component.

Type

variable

placeholders

atoms-nav-button

Since 1.0.0
%atoms-nav-button { ... }

Description

Defines the base structure of the nav-button component.

Requires

note

mixins

atoms-note review

Since 1.0.0
@mixin atoms-note($custom) { ... }

Description

Builds a constructor for the note component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our note component

Requires

atoms-note--theme

Since 1.0.0
@mixin atoms-note--theme($skin) { ... }

Description

Defines the note component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The note component's themeable properties

Requires

variables

atoms-note

Since 1.0.0
$atoms-note: (
                                
                                'background': color('gold'),
                                'foreground': color('blue', 'dark'),
                                'padding': (
                                  'x': $rhythm-x,
                                  'y': 10px
                                ),
                                'spacing': $rhythm-y / 2,
                                'radius': 4px,
                                'font': (
                                  'font-family': font('accent'),
                                  'font-weight': normal,
                                  'font-style': italic,
                                  'font-size': 18px,
                                  'line-height': 1.6111
                                ),
                                
                                'label': (
                                  'color': color('blue'),
                                  'spacing': $rhythm-x
                                )
                                
                              );

Description

Defines the base skin of the note component.

Type

variable

placeholders

atoms-note

Since 1.0.0
%atoms-note { ... }

Description

Defines the base structure of the note component.

rule

mixins

atoms-rule review

Since 1.0.0
@mixin atoms-rule($custom) { ... }

Description

Builds a constructor for the rule component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our rule component

Requires

atoms-rule--theme

Since 1.0.0
@mixin atoms-rule--theme($skin) { ... }

Description

Defines the rule component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The rule component's themeable properties

Requires

variables

atoms-rule

Since 1.0.0
$atoms-rule: (
                                
                                'styles': (
                                  'default': (
                                    'border': $border-width-s solid rgba(color('blue', 'dark'), .1),
                                    'width': 100%
                                  ),
                                  'light': (
                                    'border': $border-width-s solid rgba(color('slate', 'light'), .5),
                                    'width': 100%
                                  ),
                                  'dark': (
                                    'border': $border-width-s solid color('blue', 'dark'),
                                    'width': 100%
                                  ),
                                  'dotted': (
                                    'border': $border-width-s dotted color('blue', 'bright'),
                                    'width': 100%
                                  ),
                                  'thick': (
                                    'border': $border-width-l solid color('blue', 'bright'),
                                    'width': 100%
                                  ),
                                  'heading': (
                                    'border': $border-width-xl solid color('gold'),
                                    'width': 60px
                                  ),
                                  'feed': (
                                    'border': $border-width-xl solid color('slate', 'light'),
                                    'width': 30px
                                  )
                                )
                                
                              );

Description

Defines the base skin of the rule component.

Type

variable

placeholders

atoms-rule

Since 1.0.0
%atoms-rule { ... }

Description

Defines the base structure of the rule component.

search

mixins

atoms-search--theme

Since 1.0.0
@mixin atoms-search--theme($skin) { ... }

Description

Defines the search component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The search component's themeable properties

Requires

variables

placeholders

subnav-button

variables

atoms-subnav-button

Since 1.0.0
$atoms-subnav-button: (
                                
                                'main': (
                                  'background': (
                                    'normal': color('blue', 'dark'),
                                    'hover': color('blue'),
                                    'active': color('blue')
                                  ),
                                  'foreground': (
                                    'normal': $color-text-light,
                                    'hover': $color-text-light,
                                    'active': $color-text-light
                                  ),
                                  'font': (
                                    'font-family': font('body'),
                                    'font-style': normal,
                                    'font-weight': bold,
                                    'font-size': 14px,
                                    'line-height': normal,
                                    'text-align': left
                                  )
                                ),
                                
                                'utility': (
                                  'background': (
                                    'normal': color('white'),
                                    'hover': color('blue'),
                                    'active': color('blue')
                                  ),
                                  'foreground': (
                                    'normal': $color-text-dark,
                                    'hover': $color-text-light,
                                    'active': $color-text-light
                                  ),
                                  'font': (
                                    'font-family': font('body'),
                                    'font-style': normal,
                                    'font-weight': bold,
                                    'font-size': 14px,
                                    'line-height': normal,
                                    'text-align': left
                                  )
                                ),
                                
                                'resource': (
                                  'background': (
                                    'normal': color('blue', 'dark'),
                                    'hover': color('blue'),
                                    'active': color('blue')
                                  ),
                                  'foreground': (
                                    'normal': $color-text-light,
                                    'hover': $color-text-light,
                                    'active': $color-text-light
                                  ),
                                  'font': (
                                    'font-family': font('body'),
                                    'font-style': normal,
                                    'font-weight': bold,
                                    'font-size': 14px,
                                    'line-height': normal,
                                    'text-align': left
                                  ),
                                  'options': (
                                    'foreground': inherit,
                                    'background': color('blue', 'light'),
                                    'shadow': inset 2px 2px 3px rgba(color('blue', 'dark'), .1),
                                    'option': (
                                      'foreground': (
                                        'normal': color('blue', 'dark'),
                                        'hover': color('blue', 'dark'),
                                        'active': color('blue', 'dark')
                                      ),
                                      'background': (
                                        'normal': transparent,
                                        'hover': color('gold'),
                                        'active': color('gold')
                                      ),
                                      'padding': 10px,
                                      'icon': (
                                        'spacing': 10px,
                                        'size': 12px
                                      ),
                                      'divider': (
                                        'thickness': $border-width-s,
                                        'color': rgba(color('white'), .2)
                                      )
                                    )
                                  )
                                ),
                                
                                'viewall': (
                                  'spacing': ($rhythm-y * 2),
                                  'foreground': (
                                    'normal': $color-text-light,
                                    'hover': $color-text-light,
                                    'active': $color-text-light
                                  ),
                                  'background': (
                                    'normal': $color-actionable,
                                    'hover': color('blue', 'mid'),
                                    'active': color('blue', 'mid')
                                  ),
                                  'link': (
                                    'foreground': (
                                      'normal': $color-text-light,
                                      'hover': color('blue', 'bright'),
                                      'active': color('blue', 'bright')
                                    ),
                                    'background': (
                                      'normal': color('blue', 'dark'),
                                      'hover': color('blue', 'dark'),
                                      'active': color('blue', 'dark')
                                    ),
                                    'border': (
                                      'thickness': $border-width-s,
                                      'color': color('slate')
                                    )
                                  )
                                ),
                                
                                'back': (
                                  'foreground': (
                                    'normal': $color-text-light,
                                    'hover': color('blue', 'bright'),
                                    'active': color('blue', 'bright')
                                  ),
                                  'background': (
                                    'normal': color('blue', 'dark'),
                                    'hover': color('blue', 'dark'),
                                    'active': color('blue', 'dark')
                                  ),
                                  'icon': (
                                    'size': 12px,
                                    'color': $color-actionable,
                                    'spacing': 1ex
                                  ),
                                  'border': (
                                    'thickness': $border-width-s,
                                    'color': color('slate')
                                  )
                                ),
                                
                                'alias': (
                                  'font': (
                                    'font-family': font('body'),
                                    'font-style': normal,
                                    'font-weight': normal,
                                    'font-size': 13px,
                                    'line-height': normal,
                                    'text-align': left
                                  ),
                                  'spacing': 1ex
                                ),
                                
                                'group': (
                                  'background': color('blue', 'dark'),
                                  'heading': (
                                    'foreground': color('gold'),
                                    'background': color('blue', 'dark')
                                  ),
                                  'padding': ($rhythm-y / 2),
                                  'spacing': $rhythm-y
                                ),
                                
                                'category': (
                                  'background': color('blue', 'dark'),
                                  'heading': (
                                    'foreground': color('gold'),
                                    'background': color('blue', 'dark'),
                                  ),
                                  'padding': ($rhythm-y / 2),
                                  'spacing': $rhythm-y
                                ),
                                
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                ),
                                'padding': (
                                  'x': (
                                    's': 10px,
                                    'm': 25px,
                                    'l': 25px
                                  ),
                                  'y': (
                                    's': 10px,
                                    'm': 10px,
                                    'l': 10px
                                  )
                                )
                                
                              );

Description

Defines the base skin of the subnav-button component.

Type

variable

mixins

atoms-subnav-button--theme

Since 1.0.0
@mixin atoms-subnav-button--theme($skin) { ... }

Description

Defines the subnav-button component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The subnav-button component's themeable properties

Requires

atoms-subnav-button review

Since 1.0.0
@mixin atoms-subnav-button($custom) { ... }

Description

Builds a constructor for the subnav-button component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our subnav-button component

Requires

placeholders

atoms-subnav-button

Since 1.0.0
%atoms-subnav-button { ... }

Description

Defines the base structure of the subnav-button component.

Requires

tab

variables

atoms-tab

Since 1.0.0
$atoms-tab: (
                              
                                'thickness': $border-width-s,
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                ),
                                'divider': (
                                  'size': 1em
                                ),
                                'indicator': (
                                  'size': 30px,
                                  'start': 45%,
                                  'stop': 55%
                                ),
                                'color': (
                                  'default': $color-text-dark,
                                  'hover': $color-actionable,
                                  'active': color('blue')
                                ),
                                'border': rgba(color('charcoal'), .25),
                              
                                'theme': (
                                  'light': (
                                    'background': color('white'),
                                    'foreground': (
                                      'default': color('blue', 'mid'),
                                      'hover': $color-actionable,
                                      'active': $color-actionable
                                    ),
                                    'border': rgba(color('slate'), .5)
                                  ),
                                  'dark': (
                                    'background': color('blue', 'dark'),
                                    'foreground': (
                                      'default': color('white'),
                                      'hover': color('slate'),
                                      'active': color('gold')
                                    ),
                                    'border': rgba(color('slate', 'light'), .25)
                                  )
                                )
                              
                              );

Description

Defines the base skin of the tab component.

Type

variable

mixins

atoms-tab--theme

Since 1.0.0
@mixin atoms-tab--theme($skin) { ... }

Description

Defines the tab component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The tab component's themeable properties

Requires

atoms-tab review

Since 1.0.0
@mixin atoms-tab($custom) { ... }

Description

Builds a constructor for the tab component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our tab component

Requires

placeholders

atoms-tab

Since 1.0.0
%atoms-tab { ... }

Description

Defines the base structure of the tab component.

Requires

table

variables

atoms-table

Since 1.0.0
$atoms-table: (
                                
                                'align': left,
                                
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': color('slate', 'light')
                                ),
                                
                                'header': (
                                  'background': color('blue', 'dark'),
                                  'foreground': color('gold')
                                ),
                                
                                'heading': color('blue')
                                
                              );

Description

Defines the base skin of the table component.

Type

variable

mixins

atoms-table--theme

Since 1.0.0
@mixin atoms-table--theme($skin) { ... }

Description

Defines the table component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The table component's themeable properties

Requires

atoms-table review

Since 1.0.0
@mixin atoms-table($custom) { ... }

Description

Builds a constructor for the table component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our table component

Requires

placeholders

atoms-table

Since 1.0.0
%atoms-table { ... }

Description

Defines the base structure of the table component.

Requires

video

variables

atoms-video

Since 1.0.0
$atoms-video: (
                                
                                'aspect': (
                                  'default': 'hd',
                                  'ratios': (
                                    'standard':     3/4,
                                    'hd':           9/16,
                                    'wide':         1/1.85,
                                    'golden':       1/1.6180,
                                    'square':       1/1,
                                    'academy':      8/11,
                                    'imax':         1/1.43,
                                    '4k':           1/1.9,
                                    'silver':       1/2.414,
                                    'ultrawide':    1/3.6
                                  )
                                ),
                                
                                'widths': (
                                  'quarter':        25%,
                                  'third':          33.333%,
                                  'half':           50%,
                                  'two-third':      66.667%,
                                  'three-quarter':  75%,
                                  'full':           100%
                                ),
                                
                                'spacing': 1em
                                
                              );

Description

Defines the base skin of the video component.

Type

variable

mixins

atoms-video--theme

Since 1.0.0
@mixin atoms-video--theme($skin) { ... }

Description

Defines the video component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The video component's themeable properties

Requires

atoms-video review

Since 1.0.0
@mixin atoms-video($custom) { ... }

Description

Builds a constructor for the video component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our video component

Requires

placeholders

atoms-video

Since 1.0.0
%atoms-video { ... }

Description

Defines the base structure of the video component.

Compounds

accordion

mixins

compounds-accordion review

Since 1.0.0-dev.0
@mixin compounds-accordion($custom) { ... }

Description

Builds a constructor for the accordion component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our accordion component

Requires

compounds-accordion--theme

Since 1.0.0-dev.0
@mixin compounds-accordion--theme($skin) { ... }

Description

Defines the accordion component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The accordion component's themeable properties

Requires

variables

compounds-accordion

Since 1.0.0-dev.0
$compounds-accordion: (
                                
                                'title': color('blue', 'mid'),
                                'toggle': (
                                  'normal': $color-actionable,
                                  'hover': color('blue', 'mid'),
                                  'active': color('blue', 'mid')
                                ),
                                'separator': (
                                  'color': color('slate'),
                                  'thickness': $border-width-s
                                ), 
                                'spacing': $rhythm-y,
                                'padding': 15px
                                
                              );

Description

Defines the base skin of the accordion component.

Type

variable

placeholders

compounds-accordion

Since 1.0.0-dev.0
%compounds-accordion { ... }

Description

Defines the base structure of the accordion component.

blocks

mixins

compounds-blocks review

Since 1.0.0-dev.0
@mixin compounds-blocks($custom) { ... }

Description

Builds a constructor for the blocks component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our blocks component

Requires

compounds-blocks--theme

Since 1.0.0-dev.0
@mixin compounds-blocks--theme($skin) { ... }

Description

Defines the blocks component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The blocks component's themeable properties

Requires

variables

compounds-blocks

Since 1.0.0-dev.0
$compounds-blocks: (
                                
                                
                                
                              );

Description

Defines the base skin of the blocks component.

Type

variable

placeholders

compounds-blocks

Since 1.0.0-dev.0
%compounds-blocks { ... }

Description

Defines the base structure of the blocks component.

cards

mixins

compounds-cards review

Since 1.0.0
@mixin compounds-cards($custom) { ... }

Description

Builds a constructor for the cards component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our cards component

Requires

compounds-cards--theme

Since 1.0.0-dev.0
@mixin compounds-cards--theme($skin) { ... }

Description

Defines the cards component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The cards component's themeable properties

Requires

variables

compounds-cards

Since 1.0.0
$compounds-cards: (
                                
                                'gap': (
                                  'x': 25px,
                                  'y': 25px
                                ),
                                
                                'columns': (
                                  's': 1,
                                  'm': 2,
                                  'l': 3,
                                  'xl': 3
                                ),
                                
                                'spacing': 25px
                                
                              );

Description

Defines the base skin of the cards component.

Type

variable

placeholders

compounds-cards

Since 1.0.0
%compounds-cards { ... }

Description

Defines the base structure of the cards component.

grouping-files

mixins

compounds-grouping-files review

Since 1.0.0-dev.0
@mixin compounds-grouping-files($custom) { ... }

Description

Builds a constructor for the grouping-files component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our grouping-files component

Requires

compounds-grouping-files--theme

Since 1.0.0-dev.0
@mixin compounds-grouping-files--theme($skin) { ... }

Description

Defines the grouping-files component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The grouping-files component's themeable properties

Requires

variables

compounds-grouping-files

Since 1.0.0-dev.0
$compounds-grouping-files: (
                              
                                'color': color('blue','base'),
                              
                              );

Description

Defines the base skin of the grouping-files component.

Type

variable

placeholders

compounds-grouping-files

Since 1.0.0-dev.0
%compounds-grouping-files { ... }

Description

Defines the base structure of the grouping-files component.

nav-menu-main

mixins

compounds-nav-menu-main review

Since 1.0.0-dev.0
@mixin compounds-nav-menu-main($custom) { ... }

Description

Builds a constructor for the nav-menu-main component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our nav-menu-main component

Requires

compounds-nav-menu-main--theme

Since 1.0.0-dev.0
@mixin compounds-nav-menu-main--theme($skin) { ... }

Description

Defines the nav-menu-main component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The nav-menu-main component's themeable properties

Requires

variables

compounds-nav-menu-main

Since 1.0.0-dev.0
$compounds-nav-menu-main: (
                              
                                'background': color('white'),
                                'menu': color('blue', 'dark'),
                              
                                'separator': (
                                  'thickness': $border-width-s,
                                  'color': rgba(color('blue', 'dark'), .1)
                                ),
                              
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                )
                              
                              );

Description

Defines the base skin of the nav-menu-main component.

Type

variable

placeholders

compounds-nav-menu-main

Since 1.0.0-dev.0
%compounds-nav-menu-main { ... }

Description

Defines the base structure of the nav-menu-main component.

Requires

nav-menu-utility

mixins

compounds-nav-menu-utility review

Since 1.0.0-dev.0
@mixin compounds-nav-menu-utility($custom) { ... }

Description

Builds a constructor for the nav-menu-utility component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our nav-menu-utility component

Requires

compounds-nav-menu-utility--theme

Since 1.0.0-dev.0
@mixin compounds-nav-menu-utility--theme($skin) { ... }

Description

Defines the nav-menu-utility component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The nav-menu-utility component's themeable properties

Requires

variables

compounds-nav-menu-utility

Since 1.0.0-dev.0
$compounds-nav-menu-utility: (
                                
                                'separator': (
                                  'color': rgba(color('blue','dark'), .2),
                                  'thickness': $border-width-s
                                )
                              
                              );

Description

Defines the base skin of the nav-menu-utility component.

Type

variable

placeholders

compounds-nav-menu-utility

Since 1.0.0-dev.0
%compounds-nav-menu-utility { ... }

Description

Defines the base structure of the nav-menu-utility component.

related

mixins

variables

placeholders

sidebar-list

mixins

compounds-sidebar-list review

Since 1.0.0-dev.0
@mixin compounds-sidebar-list($custom) { ... }

Description

Builds a constructor for the sidebar-list component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our sidebar-list component

Requires

compounds-sidebar-list--theme

Since 1.0.0-dev.0
@mixin compounds-sidebar-list--theme($skin) { ... }

Description

Defines the sidebar-list component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The sidebar-list component's themeable properties

Requires

variables

compounds-sidebar-list

Since 1.0.0-dev.0
$compounds-sidebar-list: (
                                
                                'title': (
                                  'color': color('blue'),
                                  'icon': (
                                    'size': 16px,
                                    'spacing': 10px
                                  )
                                ),
                                
                                'spacing': (
                                  'title': 1rem,
                                  'button': 25px
                                ),
                                
                                'padding': 35px,
                                
                                'divider': map-deep-get($atoms-rule, 'styles.dotted.border')
                                
                              );

Description

Defines the base skin of the sidebar-list component.

Type

variable

placeholders

compounds-sidebar-list

Since 1.0.0-dev.0
%compounds-sidebar-list { ... }

Description

Defines the base structure of the sidebar-list component.

slider

variables

compounds-slider

Since 1.0.0-dev.0
$compounds-slider: (
                                
                                'max': 25,
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                ),
                                'indicator': (
                                  'size': 11px,
                                  'spacing': 10px,
                                  'border': (
                                    'thickness': $border-width-m,
                                    'color': color('blue', 'bright')
                                  ),
                                  'fill': color('blue', 'bright')
                                ),
                                'button': (
                                  'color': color('blue', 'bright'),
                                  'size': 50px,
                                  'offset': (
                                    's': 93%,
                                    'm': 90%,
                                    'l': 80%
                                  )
                                )
                                
                              );

Description

Defines the base skin of the slider component.

Type

variable

mixins

compounds-slider--theme

Since 1.0.0-dev.0
@mixin compounds-slider--theme($skin) { ... }

Description

Defines the slider component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The slider component's themeable properties

Requires

compounds-slider review

Since 1.0.0-dev.0
@mixin compounds-slider($custom) { ... }

Description

Builds a constructor for the slider component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our slider component

Requires

placeholders

compounds-slider

Since 1.0.0-dev.0
%compounds-slider { ... }

Description

Defines the base structure of the slider component.

subnav-menu-main

variables

compounds-subnav-menu-main

Since 1.0.0-dev.0
$compounds-subnav-menu-main: (
                                
                                'background': color('blue', 'dark'),
                                
                                'heading': (
                                  'color': color('gold'),
                                  'spacing': ($rhythm-y / 4),
                                  'padding': (
                                    'x': (
                                      's': 10px,
                                      'm': 25px,
                                      'l': 25px
                                    ),
                                    'y': ($rhythm-y / 2)
                                  )
                                ),
                                
                              );

Description

Defines the base skin of the subnav-menu-main component.

Type

variable

mixins

compounds-subnav-menu-main--theme

Since 1.0.0-dev.0
@mixin compounds-subnav-menu-main--theme($skin) { ... }

Description

Defines the subnav-menu-main component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The subnav-menu-main component's themeable properties

Requires

compounds-subnav-menu-main review

Since 1.0.0-dev.0
@mixin compounds-subnav-menu-main($custom) { ... }

Description

Builds a constructor for the subnav-menu-main component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our subnav-menu-main component

Requires

placeholders

compounds-subnav-menu-main

Since 1.0.0-dev.0
%compounds-subnav-menu-main { ... }

Description

Defines the base structure of the subnav-menu-main component.

Requires

tab-menu

variables

compounds-tab-menu

Since 1.0.0-dev.0
$compounds-tab-menu: (
                              
                                'theme': 'light',
                                'themes': (
                                  'light': (
                                    'dropdown': $color-actionable
                                  ),
                                  'dark': (
                                    'dropdown': color('gold')
                                  )
                                ),
                              
                                'dropdown': (
                                  'padding': (
                                    'x': 10px,
                                    'y': 5px
                                  ),
                                  'spacing': 5px,
                                  'icon': 20px,
                                  'underline': $border-width-s
                                )
                              
                              );

Description

Defines the base skin of the tab-menu component.

Type

variable

mixins

compounds-tab-menu--theme

Since 1.0.0-dev.0
@mixin compounds-tab-menu--theme($skin) { ... }

Description

Defines the tab-menu component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The tab-menu component's themeable properties

Requires

compounds-tab-menu review

Since 1.0.0-dev.0
@mixin compounds-tab-menu($custom) { ... }

Description

Builds a constructor for the tab-menu component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our tab-menu component

Requires

placeholders

compounds-tab-menu

Since 1.0.0-dev.0
%compounds-tab-menu { ... }

Description

Defines the base structure of the tab-menu component.

tiles

variables

compounds-tiles

Since 1.0.0-dev.0
$compounds-tiles: (
                              
                                'gap': (
                                  'x': 25px,
                                  'y': 25px
                                ),
                              
                                'columns': (
                                  's': 1,
                                  'm': 2,
                                  'l': 3,
                                  'xl': 3
                                ),
                              
                                'spacing': 25px
                              );

Description

Defines the base skin of the tiles component.

Type

variable

mixins

compounds-tiles--theme

Since 1.0.0-dev.0
@mixin compounds-tiles--theme($skin) { ... }

Description

Defines the tiles component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The tiles component's themeable properties

Requires

compounds-tiles review

Since 1.0.0-dev.0
@mixin compounds-tiles($custom) { ... }

Description

Builds a constructor for the tiles component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our tiles component

Requires

placeholders

compounds-tiles

Since 1.0.0-dev.0
%compounds-tiles { ... }

Description

Defines the base structure of the tiles component.

utility-list

variables

compounds-utility-list

Since 1.0.0
$compounds-utility-list: (
                                
                                'icon': 25px,
                                
                                'padding': 25px,
                                'spacing': 5px,
                                
                                //'context': color('blue'),
                                'title': color('blue'),
                                
                                'background': color('slate', 'light'),
                              
                                'border': (
                                  'offset': 25px,
                                  'thickness': $border-width-s,
                                  'color': tint(color('charcoal'), 80%)
                                )
                                
                              );

Description

Defines the base skin of the utility-list component.

Type

variable

mixins

compounds-utility-list--theme

Since 1.0.0
@mixin compounds-utility-list--theme($skin) { ... }

Description

Defines the utility-list component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The utility-list component's themeable properties

Requires

compounds-utility-list review

Since 1.0.0
@mixin compounds-utility-list($custom) { ... }

Description

Builds a constructor for the utility-list component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our utility-list component

Requires

placeholders

compounds-utility-list

Since 1.0.0
%compounds-utility-list { ... }

Description

Defines the base structure of the utility-list component.

Molecules

accordion

mixins

molecules-accordion review

Since 1.0.0
@mixin molecules-accordion($custom) { ... }

Description

Builds a constructor for the accordion component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our accordion component

Requires

molecules-accordion--theme

Since 1.0.0
@mixin molecules-accordion--theme($skin) { ... }

Description

Defines the accordion component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The accordion component's themeable properties

Requires

variables

molecules-accordion

Since 1.0.0
$molecules-accordion: (
                                
                                'background': rgba(color('slate', 'light'), .5),
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                ),
                                'size': 100px,
                                'indicator': (
                                  'size': 25px,
                                  'color': $color-actionable
                                ),
                                'padding': 25px,
                                'title': color('blue', 'dark'),
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': color('slate')
                                )
                                
                              );

Description

Defines the base skin of the accordion component.

Type

variable

placeholders

molecules-accordion

Since 1.0.0
%molecules-accordion { ... }

Description

Defines the base structure of the accordion component.

alert

mixins

molecules-alert review

Since 1.0.0
@mixin molecules-alert($custom) { ... }

Description

Builds a constructor for the alert component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our alert component

Requires

molecules-alert--theme

Since 1.0.0
@mixin molecules-alert--theme($skin) { ... }

Description

Defines the alert component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The alert component's themeable properties

Requires

variables

molecules-alert

Since 1.0.0
$molecules-alert: (
                                
                                'themes': (
                                  
                                  'default': (
                                    'foreground': color('charcoal'),
                                    'background': tint(color('charcoal'), 80%),
                                    'border': rgba(tint(nth(color-stops(color('charcoal'), tint(color('charcoal'), 80%), 3), 2), 25%), .3),
                                    'dismiss': (
                                      'normal': tint(nth(color-stops(color('charcoal'), tint(color('charcoal'), 80%), 3), 2), 25%),
                                      'hover': nth(color-stops(color('charcoal'), tint(color('charcoal'), 80%), 3), 2),
                                      'active': nth(color-stops(color('charcoal'), tint(color('charcoal'), 80%), 3), 2)
                                    )
                                  ),
                                  
                                  'info': (
                                    'foreground': color('ui', 'info'),
                                    'background': color('ui', 'info', 'light'),
                                    'border': rgba(color('ui', 'info', 'bright'), .3),
                                    'dismiss': (
                                      'normal': color('ui', 'info', 'bright'),
                                      'hover': color('ui', 'info', 'mid'),
                                      'active': color('ui', 'info', 'mid')
                                    )
                                  ),
                                  
                                  'success': (
                                    'foreground': color('ui', 'success'),
                                    'background': color('ui', 'success', 'light'),
                                    'border': rgba(color('ui', 'success', 'bright'), .3),
                                    'dismiss': (
                                      'normal': color('ui', 'success', 'bright'),
                                      'hover': color('ui', 'success', 'mid'),
                                      'active': color('ui', 'success', 'mid')
                                    )
                                  ),
                                  
                                  'caution': (
                                    'foreground': color('ui', 'caution'),
                                    'background': color('ui', 'caution', 'light'),
                                    'border': rgba(color('ui', 'caution', 'bright'), .3),
                                    'dismiss': (
                                      'normal': color('ui', 'caution', 'bright'),
                                      'hover': color('ui', 'caution', 'mid'),
                                      'active': color('ui', 'caution', 'mid')
                                    )
                                  ),
                                  
                                  'error': (
                                    'foreground': color('ui', 'error'),
                                    'background': color('ui', 'error', 'light'),
                                    'border': rgba(color('ui', 'error', 'bright'), .3),
                                    'dismiss': (
                                      'normal': color('ui', 'error', 'bright'),
                                      'hover': color('ui', 'error', 'mid'),
                                      'active': color('ui', 'error', 'mid')
                                    )
                                  ),
                                  
                                  'light': (
                                    'foreground': color('charcoal'),
                                    'background': color('white'),
                                    'border': rgba(tint(mix(color('charcoal'), color('white'), 40%), 25%), .3),
                                    'dismiss': (
                                      'normal': tint(mix(color('charcoal'), color('white'), 40%), 25%),
                                      'hover': mix(color('charcoal'), color('white'), 40%),
                                      'active': mix(color('charcoal'), color('white'), 40%)
                                    )
                                  ),
                                  
                                  'dark': (
                                    'foreground': color('white'),
                                    'background': color('charcoal'),
                                    'border': rgba(tint(mix(color('white'), color('charcoal'), 40%), 25%), .3),
                                    'dismiss': (
                                      'normal': tint(mix(color('white'), color('charcoal'), 40%), 25%),
                                      'hover': mix(color('white'), color('charcoal'), 40%),
                                      'active': mix(color('white'), color('charcoal'), 40%)
                                    )
                                  )
                                  
                                ),
                                'theme': 'default',
                                
                                'border': (
                                  'thickness': $border-width-s,
                                  'offset': 25px
                                ),
                                
                                'gap': 10px,
                                'padding': 25px,
                                'dismiss': (
                                  'size': 25px,
                                  'padding': 5px
                                ),
                                
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                )
                                
                              );

Description

Defines the base skin of the alert component.

Type

variable

placeholders

molecules-alert

Since 1.0.0
%molecules-alert { ... }

Description

Defines the base structure of the alert component.

block

mixins

molecules-block review

Since 1.0.0
@mixin molecules-block($custom) { ... }

Description

Builds a constructor for the block component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our block component

Requires

molecules-block--theme

Since 1.0.0
@mixin molecules-block--theme($skin) { ... }

Description

Defines the block component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The block component's themeable properties

Requires

variables

molecules-block

Since 1.0.0
$molecules-block: (
                                
                                'theme': 'dark',
                                'themes': (
                                  'dark': (
                                    'heading': color('gold'),
                                    'foreground': $color-text-light,
                                    'background': color('blue', 'dark'),
                                    'shadow': color('black')
                                  ),
                                  'light': (
                                    'heading': color('blue', 'dark'),
                                    'foreground': $color-text-dark,
                                    'background': color('slate', 'light'),
                                    'shadow': color('charcoal')
                                  )
                                ),
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                                
                                'gap': (
                                  'outer': 100px,
                                  'inner': 1em
                                ),
                                
                                'overhang': 25px,
                                
                                'shadow': 50px
                                
                              );

Description

Defines the base skin of the block component.

Type

variable

placeholders

molecules-block

Since 1.0.0
%molecules-block { ... }

Description

Defines the base structure of the block component.

branding-header

mixins

molecules-branding-header review

Since 1.0.0-dev.0
@mixin molecules-branding-header($custom) { ... }

Description

Builds a constructor for the branding-header component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our branding-header component

Requires

molecules-branding-header--theme

Since 1.0.0-dev.0
@mixin molecules-branding-header--theme($skin) { ... }

Description

Defines the branding-header component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The branding-header component's themeable properties

Requires

variables

molecules-branding-header

Since 1.0.0-dev.0
$molecules-branding-header: (
                              
                                'background': color('white'),
                                'organization': color('blue', 'dark'),
                                'division': color('blue', 'dark'),
                              
                                'dropdown': (
                                  'color': color('blue', 'bright'),
                                  'spacing': 1em,
                                  'icon': 15px
                                ),
                              
                                'badge': (
                                  'color': color('blue', 'mid'),
                                  'stroke': 10px,
                                  'size': (
                                    'min': 75px,
                                    'max': 100px
                                  )
                                ),
                              
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                ),
                              
                                'gap': 5px,
                                'padding': (
                                  'x': 30px,
                                  'y': 20px
                                )
                              
                              );

Description

Defines the base skin of the branding-header component.

Type

variable

placeholders

molecules-branding-header

Since 1.0.0-dev.0
%molecules-branding-header { ... }

Description

Defines the base structure of the branding-header component.

breadcrumbs

mixins

molecules-breadcrumbs review

Since 1.0.0-dev.0
@mixin molecules-breadcrumbs($custom) { ... }

Description

Builds a constructor for the breadcrumbs component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our breadcrumbs component

Requires

molecules-breadcrumbs--theme

Since 1.0.0-dev.0
@mixin molecules-breadcrumbs--theme($skin) { ... }

Description

Defines the breadcrumbs component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The breadcrumbs component's themeable properties

Requires

variables

molecules-breadcrumbs

Since 1.0.0-dev.0
$molecules-breadcrumbs: (
                              
                                'color': color('blue', 'bright')
                              
                              );

Description

Defines the base skin of the breadcrumbs component.

Type

variable

placeholders

molecules-breadcrumbs

Since 1.0.0-dev.0
%molecules-breadcrumbs { ... }

Description

Defines the base structure of the breadcrumbs component.

Requires

card-action

mixins

molecules-card-action review

Since 1.0.0
@mixin molecules-card-action($custom) { ... }

Description

Builds a constructor for the card-action component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our card-action component

Requires

molecules-card-action--theme

Since 1.0.0
@mixin molecules-card-action--theme($skin) { ... }

Description

Defines the card-action component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The card-action component's themeable properties

Requires

variables

molecules-card-action

Since 1.0.0
$molecules-card-action: (
                                
                                'padding': 25px,
                                'gap': 25px,
                                'size': 265px,
                                'image': 190px,
                                'color': color('blue'),
                                'bar': (
                                  'thickness': $border-width-l,
                                  'color': color('blue', 'bright')
                                ),
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': color('slate', 'light')
                                ),
                                'shadow': 0px 3px 3px rgba(color('black'), .08)
                                
                              );

Description

Defines the base skin of the card-action component.

Type

variable

placeholders

molecules-card-action

Since 1.0.0
%molecules-card-action { ... }

Description

Defines the base structure of the card-action component.

card-button

mixins

molecules-card-button review

Since 1.0.0-dev.0
@mixin molecules-card-button($custom) { ... }

Description

Builds a constructor for the card-button component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our card-button component

Requires

molecules-card-button--theme

Since 1.0.0-dev.0
@mixin molecules-card-button--theme($skin) { ... }

Description

Defines the card-button component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The card-button component's themeable properties

Requires

variables

molecules-card-button

Since 1.0.0-dev.0
$molecules-card-button: (
                                
                                'size': 125px,
                                'padding': 20px,
                                
                                'background': (
                                  'normal': color('blue', 'mid'),
                                  'hover': color('blue'),
                                  'active': color('blue')
                                ),
                                'foreground': (
                                  'normal': $color-text-light,
                                  'hover': $color-text-light,
                                  'active': $color-text-light
                                ),
                                
                                'border': (
                                  'offset': 15px,
                                  'thickness': $border-width-s,
                                  'color': rgba(color('slate', 'light'), .3)
                                ),
                                
                              );

Description

Defines the base skin of the card-button component.

Type

variable

placeholders

molecules-card-button

Since 1.0.0-dev.0
%molecules-card-button { ... }

Description

Defines the base structure of the card-button component.

card-contact

mixins

molecules-card-contact review

Since 1.0.0
@mixin molecules-card-contact($custom) { ... }

Description

Builds a constructor for the card-contact component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our card-contact component

Requires

molecules-card-contact--theme

Since 1.0.0
@mixin molecules-card-contact--theme($skin) { ... }

Description

Defines the card-contact component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The card-contact component's themeable properties

Requires

variables

molecules-card-contact

Since 1.0.0
$molecules-card-contact: (
                                
                                'bar': (
                                  'thickness': $border-width-m,
                                  'color': $color-actionable
                                ),
                                'stripe': tint(color('slate', 'light'), 50%),
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('slate'), 50%)
                                ),
                                'foreground': color('blue'),
                                'background': color('white'),
                                
                                'radius': 5px,
                                'padding': 40px 25px 25px,
                                'gap': 5px,
                                'image': 60px,
                                'name': (
                                  'normal': color('blue', 'dark'),
                                  'hover': color('blue', 'bright'),
                                  'active': color('blue', 'bright')
                                ),
                                'email': (
                                  'normal': $color-actionable,
                                  'hover': color('blue', 'mid'),
                                  'active': color('blue', 'mid')
                                )
                                
                              );

Description

Defines the base skin of the card-contact component.

Type

variable

placeholders

molecules-card-contact

Since 1.0.0
%molecules-card-contact { ... }

Description

Defines the base structure of the card-contact component.

card-librarian

mixins

molecules-card-librarian review

Since 1.0.0
@mixin molecules-card-librarian($custom) { ... }

Description

Builds a constructor for the card-librarian component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our card-librarian component

Requires

molecules-card-librarian--theme

Since 1.0.0
@mixin molecules-card-librarian--theme($skin) { ... }

Description

Defines the card-librarian component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The card-librarian component's themeable properties

Requires

variables

molecules-card-librarian

Since 1.0.0
$molecules-card-librarian: (
                                
                                'color': color('blue'),
                                'context': color('blue', 'dark'),
                                'name': (
                                  'normal': color('blue', 'dark'),
                                  'hover': color('blue', 'bright'),
                                  'active': color('blue', 'bright')
                                ),
                                'title': color('blue', 'dark'),
                                'contact': (
                                  'normal': color('blue'),
                                  'hover': color('blue', 'bright'),
                                  'active': color('blue', 'bright')
                                ),
                                'subjects': (
                                  'normal': color('blue'),
                                  'hover': color('blue', 'bright'),
                                  'active': color('blue', 'bright')
                                ),
                                
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('slate'), 50%)
                                ),
                                'divider': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('slate'), 50%),
                                  'size': 100%
                                ),
                                'bar': (
                                  'thickness': $border-width-m,
                                  'color': $color-actionable
                                ),
                                
                                'image': 60px,
                                'icon': (
                                  'size': 18px,
                                  'color': color('blue'),
                                  'spacing': 10px
                                ),
                                'padding': 25px,
                                'gap': (
                                  'x': 50px,
                                  'y': (15px, 10px)
                                )
                                
                              );

Description

Defines the base skin of the card-librarian component.

Type

variable

placeholders

molecules-card-librarian

Since 1.0.0
%molecules-card-librarian { ... }

Description

Defines the base structure of the card-librarian component.

card-library-aid

mixins

molecules-card-library-aid review

Since 1.0.0
@mixin molecules-card-library-aid($custom) { ... }

Description

Builds a constructor for the card-library-aid component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our card-library-aid component

Requires

molecules-card-library-aid--theme

Since 1.0.0
@mixin molecules-card-library-aid--theme($skin) { ... }

Description

Defines the card-library-aid component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The card-library-aid component's themeable properties

Requires

variables

molecules-card-library-aid

Since 1.0.0
$molecules-card-library-aid: (
                                
                                'bar': (
                                  'thickness': $border-width-m,
                                  'color': $color-actionable
                                ),
                                'stripe': tint(color('slate', 'light'), 50%),
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('slate'), 50%)
                                ),
                                'background': color('white'),
                                
                                'radius': 5px,
                                'padding': 40px 25px 25px,
                                'gap': 5px,
                                'icon': (
                                  'size': 60px,
                                  'scale': 75%,
                                  'background': color('blue', 'bright'),
                                  'border': 4px solid color('white')
                                ),
                                
                                'title': (
                                  'normal': color('blue'),
                                  'hover': $color-actionable,
                                  'active': $color-actionable
                                ),
                                'context': color('blue')
                                
                              );

Description

Defines the base skin of the card-library-aid component.

Type

variable

placeholders

molecules-card-library-aid

Since 1.0.0
%molecules-card-library-aid { ... }

Description

Defines the base structure of the card-library-aid component.

card-library-guide

mixins

molecules-card-library-guide review

Since 1.0.0
@mixin molecules-card-library-guide($custom) { ... }

Description

Builds a constructor for the card-library-guide component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our card-library-guide component

Requires

molecules-card-library-guide--theme

Since 1.0.0
@mixin molecules-card-library-guide--theme($skin) { ... }

Description

Defines the card-library-guide component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The card-library-guide component's themeable properties

Requires

variables

molecules-card-library-guide

Since 1.0.0
$molecules-card-library-guide: (
                                
                                'bar': (
                                  'thickness': $border-width-l,
                                  'color': color('blue', 'bright')
                                ),
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': color('slate', 'light')
                                ),
                                'background': color('white'),
                                'shadow': 0px 3px 3px rgba(color('black'), .08),
                                
                                'padding': 50px 25px,
                                
                                'title': (
                                  'normal': color('blue'),
                                  'hover': $color-actionable,
                                  'active': $color-actionable
                                )
                                
                              );

Description

Defines the base skin of the card-library-guide component.

Type

variable

placeholders

molecules-card-library-guide

Since 1.0.0
%molecules-card-library-guide { ... }

Description

Defines the base structure of the card-library-guide component.

card-listing

mixins

molecules-card-listing review

Since 1.0.0
@mixin molecules-card-listing($custom) { ... }

Description

Builds a constructor for the card-listing component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our card-listing component

Requires

molecules-card-listing--theme

Since 1.0.0
@mixin molecules-card-listing--theme($skin) { ... }

Description

Defines the card-listing component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The card-listing component's themeable properties

Requires

variables

molecules-card-listing

Since 1.0.0
$molecules-card-listing: (
                              
                                'theme': 'light',
                                'themes': (
                                  'light': (
                                    'background': tint(color('slate', 'light'), 50%),
                                    'date': color('blue'),
                                    'title': color('blue', 'dark'),
                                    'description': $color-text-dark
                                  ),
                                  'dark': (
                                    'background': color('white'),
                                    'context': color('blue'),
                                    'title': color('blue', 'dark'),
                                    'description': $color-text-dark
                                  )
                                ),
                              
                                'padding': 50px 25px 25px,
                                'gap': (
                                  'x': 25px,
                                  'y': 5px
                                ),
                                'size': 375px,
                              
                                'border': (
                                  'offset': 15px,
                                  'thickness': $border-width-s,
                                  'color': rgba(color('charcoal'), .2)
                                ),
                              
                                'image': (
                                  'width': (50%, 55%),
                                  'height': 375px
                                )
                              
                              );

Description

Defines the base skin of the card-listing component.

Type

variable

placeholders

molecules-card-listing

Since 1.0.0
%molecules-card-listing { ... }

Description

Defines the base structure of the card-listing component.

card-multimedia

mixins

molecules-card-multimedia review

Since 1.0.0
@mixin molecules-card-multimedia($custom) { ... }

Description

Builds a constructor for the card-multimedia component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our card-multimedia component

Requires

molecules-card-multimedia--theme

Since 1.0.0
@mixin molecules-card-multimedia--theme($skin) { ... }

Description

Defines the card-multimedia component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The card-multimedia component's themeable properties

Requires

variables

molecules-card-multimedia

Since 1.0.0
$molecules-card-multimedia: (
                                
                                'bar': (
                                  'thickness': $border-width-m,
                                  'color': $color-actionable
                                ),
                                'stripe': tint(color('slate', 'light'), 50%),
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('slate'), 50%)
                                ),
                                'background': color('white'),
                                
                                'radius': 5px,
                                'padding': 40px 25px 80px,
                                'spacing': 25px,
                                'gap': 15px,
                                'icon': (
                                  'size': 60px,
                                  'scale': 75%,
                                  'background': color('blue', 'bright'),
                                  'border': 4px solid color('white')
                                ),
                                
                                'title': (
                                  'normal': color('blue'),
                                  'hover': $color-actionable,
                                  'active': $color-actionable
                                ),
                                'context': color('blue'),
                                'duration': $color-text-dark
                                
                              );

Description

Defines the base skin of the card-multimedia component.

Type

variable

placeholders

molecules-card-multimedia

Since 1.0.0
%molecules-card-multimedia { ... }

Description

Defines the base structure of the card-multimedia component.

card-staff

mixins

molecules-card-staff review

Since 1.0.0-dev.0
@mixin molecules-card-staff($custom) { ... }

Description

Builds a constructor for the card-staff component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our card-staff component

Requires

molecules-card-staff--theme

Since 1.0.0-dev.0
@mixin molecules-card-staff--theme($skin) { ... }

Description

Defines the card-staff component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The card-staff component's themeable properties

Requires

variables

molecules-card-staff

Since 1.0.0-dev.0
$molecules-card-staff: (
                                
                                'color': color('blue'),
                                'context': color('blue', 'dark'),
                                'name': (
                                  'normal': color('blue', 'dark'),
                                  'hover': color('blue', 'bright'),
                                  'active': color('blue', 'bright')
                                ),
                                'title': color('blue', 'dark'),
                                'contact': (
                                  'normal': color('blue'),
                                  'hover': color('blue', 'bright'),
                                  'active': color('blue', 'bright')
                                ),
                                
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('slate'), 50%)
                                ),
                                'divider': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('slate'), 50%),
                                  'size': 100%
                                ),
                                'bar': (
                                  'thickness': $border-width-m,
                                  'color': $color-actionable
                                ),
                                
                                'image': 60px,
                                'icon': (
                                  'size': 18px,
                                  'color': color('blue'),
                                  'spacing': 10px
                                ),
                                'padding': 25px,
                                'gap': (
                                  'x': 50px,
                                  'y': (15px, 10px)
                                )
                                
                              );

Description

Defines the base skin of the card-staff component.

Type

variable

placeholders

molecules-card-staff

Since 1.0.0-dev.0
%molecules-card-staff { ... }

Description

Defines the base structure of the card-staff component.

explorer

mixins

molecules-explorer review

Since 1.0.0
@mixin molecules-explorer($custom) { ... }

Description

Builds a constructor for the explorer component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our explorer component

Requires

molecules-explorer--theme

Since 1.0.0
@mixin molecules-explorer--theme($skin) { ... }

Description

Defines the explorer component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The explorer component's themeable properties

Requires

variables

molecules-explorer

Since 1.0.0
$molecules-explorer: (
                                
                                'background': color('blue', 'mid'),
                                'heading': $color-text-light,
                                'context': color('gold'),
                                'padding': 30px,
                                'gap': 10px,
                                'border': (
                                  'color': rgba(color('slate', 'light'), .3),
                                  'offset': 15px,
                                  'thickness': $border-width-s
                                ),
                                'link': (
                                  'normal': color('slate', 'light'),
                                  'hover': $color-text-light,
                                  'active': $color-text-light
                                )
                                
                              );

Description

Defines the base skin of the explorer component.

Type

variable

placeholders

molecules-explorer

Since 1.0.0
%molecules-explorer { ... }

Description

Defines the base structure of the explorer component.

feature

mixins

molecules-feature review

Since 1.0.0
@mixin molecules-feature($custom) { ... }

Description

Builds a constructor for the feature component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our feature component

Requires

molecules-feature--theme

Since 1.0.0
@mixin molecules-feature--theme($skin) { ... }

Description

Defines the feature component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The feature component's themeable properties

Requires

variables

molecules-feature

Since 1.0.0
$molecules-feature: (
                              
                                'theme': 'light',
                                'themes': (
                                  'light': (
                                    'background': tint(color('slate', 'light'), 50%),
                                    'context': $color-text-dark,
                                    'heading': color('blue', 'mid'),
                                    'description': $color-text-dark
                                  ),
                                  'dark': (
                                    'background': color('white'),
                                    'context': tint($color-text-dark, 50%),
                                    'heading': color('blue', 'mid'),
                                    'description': $color-text-dark
                                  )
                                ),
                              
                                'padding': 25px,
                                'gap': (
                                  'x': 25px,
                                  'y': 5px
                                ),
                                'size': 400px,
                              
                                'border': (
                                  'offset': 15px,
                                  'thickness': $border-width-s,
                                  'color': rgba(color('charcoal'), .2)
                                ),
                              
                                'spacing': (
                                  'description': 10px,
                                  'action': 20px
                                ),
                              
                                'image': 275px
                              
                              );

Description

Defines the base skin of the feature component.

Type

variable

placeholders

molecules-feature

Since 1.0.0
%molecules-feature { ... }

Description

Defines the base structure of the feature component.

feed-item

mixins

molecules-feed-item review

Since 1.0.0
@mixin molecules-feed-item($custom) { ... }

Description

Builds a constructor for the feed-item component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our feed-item component

Requires

molecules-feed-item--theme

Since 1.0.0
@mixin molecules-feed-item--theme($skin) { ... }

Description

Defines the feed-item component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The feed-item component's themeable properties

Requires

variables

molecules-feed-item

Since 1.0.0
$molecules-feed-item: (
                                
                                'title': (
                                  'normal': $color-text-dark,
                                  'hover': $color-actionable,
                                  'active': $color-actionable
                                ),
                                'date': color('blue'),
                                'gap': 5px
                                
                              );

Description

Defines the base skin of the feed-item component.

Type

variable

placeholders

molecules-feed-item

Since 1.0.0
%molecules-feed-item { ... }

Description

Defines the base structure of the feed-item component.

figure

mixins

molecules-figure review

Since 1.0.0
@mixin molecules-figure($custom) { ... }

Description

Builds a constructor for the figure component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our figure component

Requires

molecules-figure--theme

Since 1.0.0
@mixin molecules-figure--theme($skin) { ... }

Description

Defines the figure component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The figure component's themeable properties

Requires

variables

molecules-figure

Since 1.0.0
$molecules-figure: (
                                
                                'padding': 25px,
                                'margin': $rhythm-y,
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('blue', 'dark'), 90%)
                                )
                                
                              );

Description

Defines the base skin of the figure component.

Type

variable

placeholders

molecules-figure

Since 1.0.0
%molecules-figure { ... }

Description

Defines the base structure of the figure component.

flyout-feed-item

mixins

molecules-flyout-feed-item review

Since 1.0.0
@mixin molecules-flyout-feed-item($custom) { ... }

Description

Builds a constructor for the flyout-feed-item component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our flyout-feed-item component

Requires

molecules-flyout-feed-item--theme

Since 1.0.0
@mixin molecules-flyout-feed-item--theme($skin) { ... }

Description

Defines the flyout-feed-item component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The flyout-feed-item component's themeable properties

Requires

variables

molecules-flyout-feed-item

Since 1.0.0
$molecules-flyout-feed-item: (
                                
                                'gap': (
                                  'x': 25px,
                                  'y': 5px
                                ),
                                'thumbnail': (
                                  'width': (
                                    's': 100px,
                                    'm': 150px,
                                    'l': 175px
                                  ),
                                  'aspect': .83
                                ),
                                'padding': 25px,
                                'background': (
                                  's': color('blue', 'dark'),
                                  'm': color('white'),
                                  'l': color('white')
                                ),
                                'foreground': (
                                  'heading': (
                                    's': $color-text-light,
                                    'm': color('blue', 'dark'),
                                    'l': color('blue', 'dark')
                                  ),
                                  'date': (
                                    's': $color-text-light,
                                    'm': color('blue'),
                                    'l': color('blue')
                                  ),
                                  'description': (
                                    's': $color-text-light,
                                    'm': $color-text-dark,
                                    'l': $color-text-dark
                                  )
                                ),
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                )
                                
                              );

Description

Defines the base skin of the flyout-feed-item component.

Type

variable

placeholders

molecules-flyout-feed-item

Since 1.0.0
%molecules-flyout-feed-item { ... }

Description

Defines the base structure of the flyout-feed-item component.

flyout-info-item

mixins

molecules-flyout-info-item review

Since 1.0.0
@mixin molecules-flyout-info-item($custom) { ... }

Description

Builds a constructor for the flyout-info-item component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our flyout-info-item component

Requires

molecules-flyout-info-item--theme

Since 1.0.0
@mixin molecules-flyout-info-item--theme($skin) { ... }

Description

Defines the flyout-info-item component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The flyout-info-item component's themeable properties

Requires

variables

molecules-flyout-info-item

Since 1.0.0
$molecules-flyout-info-item: (
                                
                                'background': (
                                  's': color('blue', 'dark'),
                                  'm': color('white'),
                                  'l': color('white')
                                ),
                                
                                'data': (
                                  'color': (
                                    'normal': (
                                      's': $color-text-light,
                                      'm': color('blue'),
                                      'l': color('blue')
                                    ),
                                    'faded': (
                                      's': color('slate'),
                                      'm': color('slate'),
                                      'l': color('slate')
                                    )
                                  )
                                ),
                                
                                'label': (
                                  'color': (
                                    's': color('blue', 'light'),
                                    'm': $color-text-dark,
                                    'l': $color-text-dark
                                  )
                                ),
                                
                                'spacing': 25px
                                
                              );

Description

Defines the base skin of the flyout-info-item component.

Type

variable

placeholders

molecules-flyout-info-item

Since 1.0.0
%molecules-flyout-info-item { ... }

Description

Defines the base structure of the flyout-info-item component.

notification

mixins

molecules-notification review

Since 1.0.0
@mixin molecules-notification($custom) { ... }

Description

Builds a constructor for the notification component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our notification component

Requires

molecules-notification--theme

Since 1.0.0
@mixin molecules-notification--theme($skin) { ... }

Description

Defines the notification component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The notification component's themeable properties

Requires

variables

molecules-notification

Since 1.0.0
$molecules-notification: (
                                
                                'themes': (
                                  
                                  'default': (
                                    'foreground': color('charcoal'),
                                    'background': color('slate', 'light'),
                                    'label': color('blue'),
                                    'dismiss': (
                                      'normal': color('blue'),
                                      'hover': color('blue', 'dark'),
                                      'active': color('blue', 'dark')
                                    )
                                  ),
                                  
                                  'info': (
                                    'foreground': color('white'),
                                    'background': color('ui', 'info'),
                                    'label': color('ui', 'caution', 'bright'),
                                    'dismiss': (
                                      'normal': color('ui', 'caution', 'bright'),
                                      'hover': color('ui', 'caution', 'mid'),
                                      'active': color('ui', 'caution', 'mid')
                                    )
                                  ),
                                  
                                  'success': (
                                    'foreground': color('blue', 'dark'),
                                    'background': color('ui', 'success', 'mid'),
                                    'label': color('blue'),
                                    'dismiss': (
                                      'normal': color('blue'),
                                      'hover': color('blue', 'dark'),
                                      'active': color('blue', 'dark')
                                    )
                                  ),
                                  
                                  'caution': (
                                    'foreground': color('blue', 'dark'),
                                    'background': color('ui', 'caution', 'bright'),
                                    'label': color('blue'),
                                    'dismiss': (
                                      'normal': color('blue'),
                                      'hover': color('blue', 'dark'),
                                      'active': color('blue', 'dark')
                                    )
                                  ),
                                  
                                  'error': (
                                    'foreground': color('white'),
                                    'background': color('ui', 'error'),
                                    'label': color('slate', 'light'),
                                    'dismiss': (
                                      'normal': color('slate', 'light'),
                                      'hover': color('slate'),
                                      'active': color('slate')
                                    )
                                  ),
                                  
                                  'light': (
                                    'foreground': color('charcoal'),
                                    'background': color('white'),
                                    'label': $color-actionable,
                                    'dismiss': (
                                      'normal': $color-actionable,
                                      'hover': color('blue', 'mid'),
                                      'active': color('blue', 'mid')
                                    )
                                  ),
                                  
                                  'dark': (
                                    'foreground': color('white'),
                                    'background': color('blue', 'dark'),
                                    'label': color('ui', 'caution', 'bright'),
                                    'dismiss': (
                                      'normal': color('ui', 'caution', 'bright'),
                                      'hover': color('ui', 'caution', 'mid'),
                                      'active': color('ui', 'caution', 'mid')
                                    )
                                  )
                                  
                                ),
                                'theme': 'default',
                                
                                'padding': 15px 25px,
                                'gap': 25px,
                                'dismiss': 25px,
                                
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                )
                                
                              );

Description

Defines the base skin of the notification component.

Type

variable

placeholders

molecules-notification

Since 1.0.0
%molecules-notification { ... }

Description

Defines the base structure of the notification component.

sidebar-list-item

mixins

molecules-sidebar-list-item review

Since 1.0.0
@mixin molecules-sidebar-list-item($custom) { ... }

Description

Builds a constructor for the sidebar-list-item component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our sidebar-list-item component

Requires

molecules-sidebar-list-item--theme

Since 1.0.0
@mixin molecules-sidebar-list-item--theme($skin) { ... }

Description

Defines the sidebar-list-item component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The sidebar-list-item component's themeable properties

Requires

variables

molecules-sidebar-list-item

Since 1.0.0
$molecules-sidebar-list-item: (
                                
                                'context': color('blue'),
                                
                                'margin': 25px,
                                
                                'icon': (
                                  'size': 20px,
                                  'spacing': 15px
                                )
                                
                              );

Description

Defines the base skin of the sidebar-list-item component.

Type

variable

placeholders

molecules-sidebar-list-item

Since 1.0.0
%molecules-sidebar-list-item { ... }

Description

Defines the base structure of the sidebar-list-item component.

slide

variables

molecules-slide

Since 1.0.0
$molecules-slide: (
                                
                                'background': color('blue', 'mid'),
                                'foreground': $color-text-light,
                                'context': color('gold'),
                                'button': (
                                  'background': (
                                    'normal': color('white'),
                                    'hover': color('gold'),
                                    'active': color('gold'),
                                    'hollow': tint(color('blue', 'mid'), 25%),
                                  ),
                                  'foreground': (
                                    'normal': color('blue', 'mid'),
                                    'hover': color('blue'),
                                    'active': color('blue'),
                                    'hollow': $color-text-light
                                  ),
                                ),
                                
                                'image': (
                                  'max': 200px,
                                  'min': 125px
                                ),
                                'gap': (
                                  'x': 25px,
                                  'y': 10px
                                ),
                                'padding': 40px,
                                'width': (
                                  's': 93%,
                                  'm': 90%,
                                  'l': 80%
                                )
                                
                              );

Description

Defines the base skin of the slide component.

Type

variable

mixins

molecules-slide--theme

Since 1.0.0
@mixin molecules-slide--theme($skin) { ... }

Description

Defines the slide component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The slide component's themeable properties

Requires

molecules-slide review

Since 1.0.0
@mixin molecules-slide($custom) { ... }

Description

Builds a constructor for the slide component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our slide component

Requires

placeholders

molecules-slide

Since 1.0.0
%molecules-slide { ... }

Description

Defines the base structure of the slide component.

tile-listing

variables

molecules-tile-listing

Since 1.0.0
$molecules-tile-listing: (
                                
                                'padding': 40px 25px,
                                'gap': 10px,
                                'image': 55%,
                                
                                'date': color('blue'),
                                'description': $color-text-dark,
                                'title': (
                                  'normal': color('blue'),
                                  'hover': $color-actionable,
                                  'active': $color-actionable
                                ),
                                
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('slate'), 50%)
                                ),
                                'radius': 5px
                                
                              );

Description

Defines the base skin of the tile-listing component.

Type

variable

mixins

molecules-tile-listing--theme

Since 1.0.0
@mixin molecules-tile-listing--theme($skin) { ... }

Description

Defines the tile-listing component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The tile-listing component's themeable properties

Requires

molecules-tile-listing review

Since 1.0.0
@mixin molecules-tile-listing($custom) { ... }

Description

Builds a constructor for the tile-listing component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our tile-listing component

Requires

placeholders

molecules-tile-listing

Since 1.0.0
%molecules-tile-listing { ... }

Description

Defines the base structure of the tile-listing component.

tile-utility

variables

molecules-tile-utility

Since 1.0.0
$molecules-tile-utility: (
                              
                                'padding': 25px,
                                'gap': 10px,
                                'image': 55%,
                              
                                'description': $color-text-dark,
                                'title': (
                                  'normal': color('blue'),
                                  'hover': $color-actionable,
                                  'active': $color-actionable
                                ),
                              
                                'border': (
                                  'thickness': $border-width-s,
                                  'color': tint(color('slate'), 50%)
                                ),
                                'radius': 5px
                              
                              );

Description

Defines the base skin of the tile-utility component.

Type

variable

mixins

molecules-tile-utility--theme

Since 1.0.0
@mixin molecules-tile-utility--theme($skin) { ... }

Description

Defines the tile-utility component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The tile-utility component's themeable properties

Requires

molecules-tile-utility review

Since 1.0.0
@mixin molecules-tile-utility($custom) { ... }

Description

Builds a constructor for the tile-utility component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our tile-utility component

Requires

placeholders

molecules-tile-utility

Since 1.0.0
%molecules-tile-utility { ... }

Description

Defines the base structure of the tile-utility component.

utility-list-item

variables

molecules-utility-list-item

Since 1.0.0
$molecules-utility-list-item: (
                                
                                'padding': 25px,
                                'gap': 10px,
                                
                                'image': 40%,
                                
                                'divider': (
                                  'thickness': $border-width-s,
                                  'color': rgba(color('slate'), .5)
                                ),
                                
                                'context': color('blue')
                                
                              );

Description

Defines the base skin of the utility-list-item component.

Type

variable

mixins

molecules-utility-list-item--theme

Since 1.0.0
@mixin molecules-utility-list-item--theme($skin) { ... }

Description

Defines the utility-list-item component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The utility-list-item component's themeable properties

Requires

molecules-utility-list-item review

Since 1.0.0
@mixin molecules-utility-list-item($custom) { ... }

Description

Builds a constructor for the utility-list-item component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our utility-list-item component

Requires

placeholders

molecules-utility-list-item

Since 1.0.0
%molecules-utility-list-item { ... }

Description

Defines the base structure of the utility-list-item component.

wayfinder

variables

molecules-wayfinder

Since 1.0.0
$molecules-wayfinder: (
                                
                                'background': color('blue', 'dark'),
                                'foreground': color('slate', 'light'),
                                'heading': color('gold'),
                                
                                'size': 350px,
                                'image': 60%,
                                'overlap': 35%,
                                
                                'padding': 25px,
                                'gap': 5px,
                                'spacing': (
                                  'text': 15px
                                ),
                                
                                'border': (
                                  'offset': 15px,
                                  'thickness': $border-width-s,
                                  'color': rgba(color('charcoal'), .2)
                                ),
                                
                              );

Description

Defines the base skin of the wayfinder component.

Type

variable

mixins

molecules-wayfinder--theme

Since 1.0.0
@mixin molecules-wayfinder--theme($skin) { ... }

Description

Defines the wayfinder component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The wayfinder component's themeable properties

Requires

molecules-wayfinder review

Since 1.0.0
@mixin molecules-wayfinder($custom) { ... }

Description

Builds a constructor for the wayfinder component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our wayfinder component

Requires

placeholders

molecules-wayfinder

Since 1.0.0
%molecules-wayfinder { ... }

Description

Defines the base structure of the wayfinder component.

Organisms

flow-content-boxes

mixins

organisms-flow-content-boxes review

Since 1.0.0-dev.0
@mixin organisms-flow-content-boxes($custom) { ... }

Description

Builds a constructor for the flow-content-boxes component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our flow-content-boxes component

Requires

organisms-flow-content-boxes--theme

Since 1.0.0-dev.0
@mixin organisms-flow-content-boxes--theme($skin) { ... }

Description

Defines the flow-content-boxes component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The flow-content-explorer component's themeable properties

Requires

variables

organisms-flow-content-boxes

Since 1.0.0-dev.0
$organisms-flow-content-boxes: (
                              
                                'gap': $rhythm-y
                              
                              );

Description

Defines the base skin of the flow-content-boxes component.

Type

variable

placeholders

organisms-flow-content-boxes

Since 1.0.0-dev.0
%organisms-flow-content-boxes { ... }

Description

Defines the base structure of the flow-content-boxes component.

intro

mixins

organisms-intro review

Since 1.0.0
@mixin organisms-intro($custom) { ... }

Description

Builds a constructor for the intro component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our intro component

Requires

organisms-intro--theme

Since 1.0.0
@mixin organisms-intro--theme($skin) { ... }

Description

Defines the intro component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The intro component's themeable properties

Requires

variables

organisms-intro

Since 1.0.0
$organisms-intro: (
                              
                                'context': color('blue'),
                                
                                'title': color('blue', 'dark'),
                                
                                'subtitle': color('blue', 'mid'),
                                
                                'thumb': (
                                  'size': 150px,
                                  'spacing': 35px
                                )
                                
                              );

Description

Defines the base skin of the intro component.

Type

variable

placeholders

organisms-intro

Since 1.0.0
%organisms-intro { ... }

Description

Defines the base structure of the intro component.

intro-hero

mixins

organisms-intro-hero review

Since 1.0.0-dev.0
@mixin organisms-intro-hero($custom) { ... }

Description

Builds a constructor for the intro-hero component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our intro-hero component

Requires

organisms-intro-hero--theme

Since 1.0.0-dev.0
@mixin organisms-intro-hero--theme($skin) { ... }

Description

Defines the intro-hero component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The intro-hero component's themeable properties

Requires

variables

organisms-intro-hero

Since 1.0.0-dev.0
$organisms-intro-hero: (
                              
                                'gradient': #282828,
                              
                                'color': color('white'),
                              
                                'subtitle': (
                                  'size': 16px
                                )
                              
                              );

Description

Defines the base skin of the intro-hero component.

Type

variable

placeholders

organisms-intro-hero

Since 1.0.0-dev.0
%organisms-intro-hero { ... }

Description

Defines the base structure of the intro-hero component.

intro-interior-cover

mixins

organisms-intro-interior-cover review

Since 1.0.0-dev.0
@mixin organisms-intro-interior-cover($custom) { ... }

Description

Builds a constructor for the intro-interior-cover component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our intro-interior-cover component

Requires

organisms-intro-interior-cover--theme

Since 1.0.0-dev.0
@mixin organisms-intro-interior-cover--theme($skin) { ... }

Description

Defines the intro-interior-cover component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The intro-interior-cover component's themeable properties

Requires

variables

organisms-intro-interior-cover

Since 1.0.0-dev.0
$organisms-intro-interior-cover: (
                                
                                'heading': color('blue','dark'),
                                'subheading': color('blue','dark'),
                                'image': 540px
                                
                              );

Description

Defines the base skin of the intro-interior-cover component.

Type

variable

placeholders

organisms-intro-interior-cover

Since 1.0.0-dev.0
%organisms-intro-interior-cover { ... }

Description

Defines the base structure of the intro-interior-cover component.

Requires

nav-bar-main

mixins

organisms-nav-bar-main review

Since 1.0.0-dev.0
@mixin organisms-nav-bar-main($custom) { ... }

Description

Builds a constructor for the nav-bar-main component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our nav-bar-main component

Requires

organisms-nav-bar-main--theme

Since 1.0.0-dev.0
@mixin organisms-nav-bar-main--theme($skin) { ... }

Description

Defines the nav-bar-main component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The nav-bar-main component's themeable properties

Requires

variables

organisms-nav-bar-main

Since 1.0.0-dev.0
$organisms-nav-bar-main: (
                              
                                'background': color('white'),
                                'padding': (
                                  's': 10px,
                                  'm': 10px,
                                  'l': 20px,
                                  'xl': 30px
                                ),
                                'spacing': 25px
                              
                              );

Description

Defines the base skin of the nav-bar-main component.

Type

variable

placeholders

organisms-nav-bar-main

Since 1.0.0-dev.0
%organisms-nav-bar-main { ... }

Description

Defines the base structure of the nav-bar-main component.

search-menu

mixins

organisms-search-menu construction

Since 1.0.0-dev.0
@mixin organisms-search-menu($custom) { ... }

Description

Builds a constructor for the search-menu component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our search-menu component

Requires

organisms-search-menu--theme

Since 1.0.0-dev.0
@mixin organisms-search-menu--theme($skin) { ... }

Description

Defines the search-menu component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The search-menu component's themeable properties

Requires

variables

organisms-search-menu

Since 1.0.0-dev.0
$organisms-search-menu: (
                                
                                'background-color': color('blue','dark')
                                
                              );

Description

Defines the base skin of the search-menu component.

Type

variable

placeholders

organisms-search-menu

Since 1.0.0-dev.0
%organisms-search-menu { ... }

Description

Defines the base structure of the search-menu component.

Requires

section-deep-dive

mixins

organisms-section-deep-dive review

Since 1.0.0-dev.0
@mixin organisms-section-deep-dive($custom) { ... }

Description

Builds a constructor for the section-deep-dive component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our section-deep-dive component

Requires

organisms-section-deep-dive--theme

Since 1.0.0-dev.0
@mixin organisms-section-deep-dive--theme($skin) { ... }

Description

Defines the section-deep-dive component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The section-deep-dive component's themeable properties

Requires

variables

organisms-section-deep-dive

Since 1.0.0-dev.0
$organisms-section-deep-dive: (
                              
                                'title': $color-text-light,
                                'headings': color('gold'),
                                'foreground': $color-text-light,
                                'background': color('blue', 'base'),
                                'link': (
                                  'normal': $color-text-light,
                                  'hover': $color-text-light,
                                  'active': $color-text-light
                                ),
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                )
                              
                              );

Description

Defines the base skin of the section-deep-dive component.

Type

variable

placeholders

organisms-section-deep-dive

Since 1.0.0-dev.0
%organisms-section-deep-dive { ... }

Description

Defines the base structure of the section-deep-dive component.

Requires

section-main

mixins

organisms-section-main review

Since 1.0.0
@mixin organisms-section-main($custom) { ... }

Description

Builds a constructor for the section-main component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our main component

Requires

organisms-section-main--theme

Since 1.0.0
@mixin organisms-section-main--theme($skin) { ... }

Description

Defines the section-main component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The main component's themeable properties

Requires

variables

organisms-section-main

Since 1.0.0
$organisms-section-main: (
                              
                                'gap': 40px,
                              
                                'theme': 'light',
                                'themes': (
                                  'light': (
                                    'foreground': $color-text-dark,
                                    'background': color('white'),
                                    'heading': color('blue'),
                                    'link': (
                                      'normal': color('blue', 'bright'),
                                      'hover': color('blue', 'mid'),
                                      'active': color('blue', 'mid')
                                    )
                                  ),
                                  'dark': (
                                    'foreground': $color-text-light,
                                    'background': color('blue', 'dark'),
                                    'heading': $color-text-light,
                                    'link': (
                                      'normal': color('blue', 'bright'),
                                      'hover': color('gold'),
                                      'active': color('gold')
                                    )
                                  )
                                )
                              
                              );

Description

Defines the base skin of the section-main component.

Type

variable

placeholders

organisms-section-main

Since 1.0.0
%organisms-section-main { ... }

Description

Defines the base structure of the section-main component.

Requires

section-major

mixins

organisms-section-major review

Since 1.0.0-dev.0
@mixin organisms-section-major($custom) { ... }

Description

Builds a constructor for the section-major component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our section-major component

Requires

organisms-section-major--theme

Since 1.0.0-dev.0
@mixin organisms-section-major--theme($skin) { ... }

Description

Defines the section-major component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The section-major component's themeable properties

Requires

variables

organisms-section-major

Since 1.0.0-dev.0
$organisms-section-major: (
                                
                                'theme': 'light',
                                'themes': (
                                  'light': (
                                    'heading': $color-text-dark,
                                    'foreground': $color-text-dark,
                                    'background': color('white')
                                  ),
                                  'dark': (
                                    'heading': $color-text-light,
                                    'foreground': $color-text-light,
                                    'background': color('blue', 'dark')
                                  )
                                ),
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                )
                                
                              );

Description

Defines the base skin of the section-major component.

Type

variable

placeholders

organisms-section-major

Since 1.0.0-dev.0
%organisms-section-major { ... }

Description

Defines the base structure of the section-major component.

Requires

section-minor

mixins

organisms-section-minor review

Since 1.0.0-dev.0
@mixin organisms-section-minor($custom) { ... }

Description

Builds a constructor for the section-minor component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our section-minor component

Requires

organisms-section-minor--theme

Since 1.0.0-dev.0
@mixin organisms-section-minor--theme($skin) { ... }

Description

Defines the section-minor component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The section-minor component's themeable properties

Requires

variables

organisms-section-minor

Since 1.0.0-dev.0
$organisms-section-minor: (
                                
                                'theme': 'light',
                                'themes': (
                                  'light': (
                                    'heading': color('blue'),
                                    'icon': color('blue'),
                                    'foreground': $color-text-dark,
                                    'background': color('white')
                                  ),
                                  'dark': (
                                    'heading': $color-text-light,
                                    'icon': $color-text-light,
                                    'foreground': $color-text-light,
                                    'background': color('blue', 'dark')
                                  )
                                ),
                                
                                'icon': (
                                  'spacing': 15px
                                ),
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': layout($layout-y-min, $layout-y-min)
                                )
                                
                              );

Description

Defines the base skin of the section-minor component.

Type

variable

placeholders

organisms-section-minor

Since 1.0.0-dev.0
%organisms-section-minor { ... }

Description

Defines the base structure of the section-minor component.

templates

bio

mixins

templates-bio review

Since 1.0.0-dev.0
@mixin templates-bio($custom) { ... }

Description

Builds a constructor for the bio component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our bio component

Requires

templates-bio--theme

Since 1.0.0-dev.0
@mixin templates-bio--theme($skin) { ... }

Description

Defines the bio component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The bio component's themeable properties

Requires

variables

templates-bio

Since 1.0.0-dev.0
$templates-bio: (
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                                
                                'gap': 20px
                                
                              );

Description

Defines the base skin of the bio component.

Type

variable

placeholders

templates-bio

Since 1.0.0-dev.0
%templates-bio { ... }

Description

Defines the base structure of the bio component.

exhibition

mixins

templates-exhibition review

Since 1.0.0-dev.0
@mixin templates-exhibition($custom) { ... }

Description

Builds a constructor for the exhibition component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our exhibition component

Requires

templates-exhibition--theme

Since 1.0.0-dev.0
@mixin templates-exhibition--theme($skin) { ... }

Description

Defines the exhibition component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The exhibition component's themeable properties

Requires

variables

templates-exhibition

Since 1.0.0-dev.0
$templates-exhibition: (
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                                
                                'divider': (
                                  'thickness': 1px,
                                  'color': color('slate', 'light')
                                ),
                                
                                'date': color('blue'),
                                
                                'sidenote': (
                                  'heading': color('blue')
                                )
                                
                              );

Description

Defines the base skin of the exhibition component.

Type

variable

placeholders

templates-exhibition

Since 1.0.0-dev.0
%templates-exhibition { ... }

Description

Defines the base structure of the exhibition component.

Requires

form

mixins

templates-form review

Since 1.0.0-dev.0
@mixin templates-form($custom) { ... }

Description

Builds a constructor for the form component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our form component

Requires

templates-form--theme

Since 1.0.0-dev.0
@mixin templates-form--theme($skin) { ... }

Description

Defines the form component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The form component's themeable properties

Requires

variables

templates-form

Since 1.0.0-dev.0
$templates-form: (
                              
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                              
                                'gap': 20px
                              
                              );

Description

Defines the base skin of the form component.

Type

variable

placeholders

templates-form

Since 1.0.0-dev.0
%templates-form { ... }

Description

Defines the base structure of the form component.

gallery

mixins

variables

placeholders

index

mixins

templates-index review

Since 1.0.0-dev.0
@mixin templates-index($custom) { ... }

Description

Builds a constructor for the index component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our index component

Requires

templates-index--theme

Since 1.0.0-dev.0
@mixin templates-index--theme($skin) { ... }

Description

Defines the index component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The index component's themeable properties

Requires

variables

templates-index

Since 1.0.0-dev.0
$templates-index: (
                              
                              'layout': (
                                'x': $layout-x,
                                'y': $layout-y
                              ),
                              
                              'gap': 20px
                              
                              );

Description

Defines the base skin of the index component.

Type

variable

placeholders

templates-index

Since 1.0.0-dev.0
%templates-index { ... }

Description

Defines the base structure of the index component.

info

mixins

templates-info review

Since 1.0.0
@mixin templates-info($custom) { ... }

Description

Builds a constructor for the info component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our info component

Requires

templates-info--theme

Since 1.0.0
@mixin templates-info--theme($skin) { ... }

Description

Defines the info component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The info component's themeable properties

Requires

variables

templates-info

Since 1.0.0
$templates-info: (
                              
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                                
                                'gap': 20px
                                
                              );

Description

Defines the base skin of the info component.

Type

variable

placeholders

templates-info

Since 1.0.0
%templates-info { ... }

Description

Defines the base structure of the info component.

Requires

landing

mixins

templates-landing review

Since 1.0.0-dev.0
@mixin templates-landing($custom) { ... }

Description

Builds a constructor for the landing component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our landing component

Requires

templates-landing--theme

Since 1.0.0-dev.0
@mixin templates-landing--theme($skin) { ... }

Description

Defines the landing component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The landing component's themeable properties

Requires

variables

templates-landing

Since 1.0.0-dev.0
$templates-landing: (
                              
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                              
                                'gap': 40px
                              
                              );

Description

Defines the base skin of the landing component.

Type

variable

placeholders

templates-landing

Since 1.0.0-dev.0
%templates-landing { ... }

Description

Defines the base structure of the landing component.

Requires

material

mixins

templates-material review

Since 1.0.0
@mixin templates-material($custom) { ... }

Description

Builds a constructor for the material component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our material component

Requires

templates-material--theme

Since 1.0.0
@mixin templates-material--theme($skin) { ... }

Description

Defines the material component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The material component's themeable properties

Requires

variables

templates-material

Since 1.0.0
$templates-material: (
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                              
                                'gap': 20px
                                
                              );

Description

Defines the base skin of the material component.

Type

variable

placeholders

templates-material

Since 1.0.0
%templates-material { ... }

Description

Defines the base structure of the material component.

periodicals

mixins

templates-periodicals review

Since 1.0.0-dev.0
@mixin templates-periodicals($custom) { ... }

Description

Builds a constructor for the periodicals component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our periodicals component

Requires

templates-periodicals--theme

Since 1.0.0-dev.0
@mixin templates-periodicals--theme($skin) { ... }

Description

Defines the periodicals component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The periodicals component's themeable properties

Requires

variables

templates-periodicals

Since 1.0.0-dev.0
$templates-periodicals: (
                                  
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                              
                                'gap': 20px
                              
                              );

Description

Defines the base skin of the periodicals component.

Type

variable

placeholders

templates-periodicals

Since 1.0.0-dev.0
%templates-periodicals { ... }

Description

Defines the base structure of the periodicals component.

research-help

mixins

templates-research-help review

Since 1.0.0-dev.0
@mixin templates-research-help($custom) { ... }

Description

Builds a constructor for the research-help component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our research-help component

Requires

templates-research-help--theme

Since 1.0.0-dev.0
@mixin templates-research-help--theme($skin) { ... }

Description

Defines the research-help component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The research-help component's themeable properties

Requires

variables

templates-research-help

Since 1.0.0-dev.0
$templates-research-help: (
                              
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                              
                                'gap': 20px
                              
                              );

Description

Defines the base skin of the research-help component.

Type

variable

placeholders

templates-research-help

Since 1.0.0-dev.0
%templates-research-help { ... }

Description

Defines the base structure of the research-help component.

research-help-directory

mixins

templates-research-help-directory review

Since 1.0.0-dev.0
@mixin templates-research-help-directory($custom) { ... }

Description

Builds a constructor for the research-help-directory component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our research-help-directory component

Requires

templates-research-help-directory--theme

Since 1.0.0-dev.0
@mixin templates-research-help-directory--theme($skin) { ... }

Description

Defines the research-help-directory component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The research-help-directory component's themeable properties

Requires

variables

templates-research-help-directory

Since 1.0.0-dev.0
$templates-research-help-directory: (
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                                
                                'gap': 20px
                                
                              );

Description

Defines the base skin of the research-help-directory component.

Type

variable

placeholders

templates-research-help-directory

Since 1.0.0-dev.0
%templates-research-help-directory { ... }

Description

Defines the base structure of the research-help-directory component.

service-directory

mixins

templates-service-directory review

Since 1.0.0-dev.0
@mixin templates-service-directory($custom) { ... }

Description

Builds a constructor for the service-directory component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our service-directory component

Requires

templates-service-directory--theme

Since 1.0.0-dev.0
@mixin templates-service-directory--theme($skin) { ... }

Description

Defines the service-directory component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The service-directory component's themeable properties

Requires

variables

templates-service-directory

Since 1.0.0-dev.0
$templates-service-directory: (
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                                
                                'gap': 20px
                                
                              );

Description

Defines the base skin of the service-directory component.

Type

variable

placeholders

templates-service-directory

Since 1.0.0-dev.0
%templates-service-directory { ... }

Description

Defines the base structure of the service-directory component.

staff-directory

variables

templates-staff-directory

Since 1.0.0-dev.0
$templates-staff-directory: (
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                                
                                'gap': 20px
                                
                              );

Description

Defines the base skin of the staff-directory component.

Type

variable

mixins

templates-staff-directory--theme

Since 1.0.0-dev.0
@mixin templates-staff-directory--theme($skin) { ... }

Description

Defines the staff-directory component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The staff-directory component's themeable properties

Requires

templates-staff-directory review

Since 1.0.0-dev.0
@mixin templates-staff-directory($custom) { ... }

Description

Builds a constructor for the staff-directory component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our staff-directory component

Requires

placeholders

templates-staff-directory

Since 1.0.0-dev.0
%templates-staff-directory { ... }

Description

Defines the base structure of the staff-directory component.

subject-librarian-directory

variables

templates-subject-librarian-directory

Since 1.0.0-dev.0
$templates-subject-librarian-directory: (
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                                
                                'gap': 20px
                                
                              );

Description

Defines the base skin of the subject-librarian-directory component.

Type

variable

mixins

templates-subject-librarian-directory--theme

Since 1.0.0-dev.0
@mixin templates-subject-librarian-directory--theme($skin) { ... }

Description

Defines the subject-librarian-directory component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The subject-librarian-directory component's themeable properties

Requires

templates-subject-librarian-directory review

Since 1.0.0-dev.0
@mixin templates-subject-librarian-directory($custom) { ... }

Description

Builds a constructor for the subject-librarian-directory component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our subject-librarian-directory component

Requires

placeholders

templates-subject-librarian-directory

Since 1.0.0-dev.0
%templates-subject-librarian-directory { ... }

Description

Defines the base structure of the subject-librarian-directory component.

tool

variables

templates-tool

Since 1.0.0
$templates-tool: (
                                
                                'layout': (
                                  'x': $layout-x,
                                  'y': $layout-y
                                ),
                                
                                'gap': 20px
                                
                              );

Description

Defines the base skin of the tool component.

Type

variable

mixins

templates-tool--theme

Since 1.0.0
@mixin templates-tool--theme($skin) { ... }

Description

Defines the tool component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The tool component's themeable properties

Requires

templates-tool review

Since 1.0.0
@mixin templates-tool($custom) { ... }

Description

Builds a constructor for the tool component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our tool component

Requires

placeholders

templates-tool

Since 1.0.0
%templates-tool { ... }

Description

Defines the base structure of the tool component.

Tokens

grid

mixins

tokens-grid review

Since 1.0.0-dev.0
@mixin tokens-grid($custom) { ... }

Description

Builds a constructor for the grid component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our grid component

Requires

tokens-grid--theme

Since 1.0.0-dev.0
@mixin tokens-grid--theme($skin) { ... }

Description

Defines the grid component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The grid component's themeable properties

Requires

variables

tokens-grid

Since 1.0.0-dev.0
$tokens-grid: (
                                
                                'gap': (
                                  'cols': 25px,
                                  'rows': 25px
                                ),
                                
                                'cols': 1fr,
                                'rows': auto,
                                
                                'align': (
                                  'cols': start,
                                  'rows': start
                                )
                                
                              );

Description

Defines the base skin of the grid component.

Type

variable

placeholders

tokens-grid

Since 1.0.0-dev.0
%tokens-grid { ... }

Description

Defines the base structure of the grid component.

heading

mixins

tokens-heading review

Since 1.0.0
@mixin tokens-heading($level, $color: null, $custom: ()) { ... }

Description

Builds a constructor for the heading component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$level

The intended heading level

string none
$color

The desired heading color

color
$custom

A custom skin for the component

map

Output

The native structure and skin of our heading component

Requires

tokens-heading--font

Since 1.0.0
@mixin tokens-heading--font($level, $skin) { ... }

Description

Defines the heading token's font properties.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$level

The intended heading level

string none
$skin

The token's skin

map none

Output

The heading component's font property

Requires

tokens-heading--color

Since 1.0.0
@mixin tokens-heading--color($level, $skin, $color: null) { ... }

Description

Defines the heading token's color properties.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$level

The intended heading level

string none
$skin

The token's skin

map none
$color

The desired heading color

color

Output

The heading component's font property

Requires

variables

tokens-heading

Since 1.0.0
$tokens-heading: (
                                
                                'h1': (
                                  'font-weight': bold,
                                  'font-style': normal,
                                  'line-height': normal,
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-heading
                                ),
                                'h1-alt': (
                                  'font-weight': bold,
                                  'font-style': normal,
                                  'line-height': normal,
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-heading
                                ),
                                'h1-hero': (
                                  'font-weight': bold,
                                  'font-style': normal,
                                  'line-height': 1.36, // 68px
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-light
                                ),
                                'h2': (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': 1.0833, // 78px
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-heading
                                ),
                                'h3': (
                                  'font-weight': bold,
                                  'font-style': normal,
                                  'line-height': 1.7083, // 41px,
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-dark
                                ),
                                'h4': (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': 1.5, // 42px
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-dark
                                ),
                                'h5': (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': normal,
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-dark
                                ),
                                'h5-alt': (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': 1.6364, // 36px
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-dark
                                ),
                                'h6': (
                                  'font-weight': bold,
                                  'font-style': normal,
                                  'line-height': 1.6667, // 20px
                                  'letter-spacing': 0.05em,
                                  'text-transform': uppercase,
                                  'color': $color-text-dark
                                )
                                
                              );

Description

Defines the base skin of the heading component.

Type

variable

Requires

placeholders

tokens-heading

Since 1.0.0
%tokens-heading { ... }

Description

Defines the base structure of the heading component.

icon

mixins

tokens-icon review

Since 1.0.0
@mixin tokens-icon($id, $color: null, $size: null, $custom: (), $pseudo: false) { ... }

Description

Builds a constructor for the icon component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$id

The ID of the desired icon

string none
$color

The desired icon color

color
$size

The desired icon size

number
$custom

A custom skin for the component

map
$pseudo

Whether the target selector is a pseudo element

boolean

Output

The native structure and skin of our icon component

Requires

tokens-icon--icon

Since 1.0.0
@mixin tokens-icon--icon($skin) { ... }

Description

Defines the icon token's icon.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The icon token's themeable properties

Requires

variables

tokens-icon

Since 1.0.0
$tokens-icon: (
                                
                                'color': null,
                                'size': null
                                
                              );

Description

Defines the base skin of the icon component.

Type

variable

placeholders

tokens-icon

Since 1.0.0
%tokens-icon { ... }

Description

Defines the base structure of the icon component.

layout

mixins

tokens-layout review

Since 1.0.0
@mixin tokens-layout($custom) { ... }

Description

Builds a constructor for the layout component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our layout component

Requires

tokens-layout--theme

Since 1.0.0
@mixin tokens-layout--theme($skin) { ... }

Description

Defines the layout component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The layout component's themeable properties

Requires

variables

tokens-layout

Since 1.0.0
$tokens-layout: (
                                
                                'x': $layout-x,
                                'y': $layout-y
                                
                              );

Description

Defines the base skin of the layout component.

Type

variable

placeholders

tokens-layout

Since 1.0.0
%tokens-layout { ... }

Description

Defines the base structure of the layout component.

reveal

mixins

tokens-reveal review

Since 1.0.0-dev.0
@mixin tokens-reveal($custom) { ... }

Description

Builds a constructor for the reveal component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$custom

A custom skin for the component

map none

Output

The native structure and skin of our reveal component

Requires

tokens-reveal--theme

Since 1.0.0-dev.0
@mixin tokens-reveal--theme($skin) { ... }

Description

Defines the reveal component theme.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$skin

The component's skin

map none

Output

The reveal component's themeable properties

Requires

variables

tokens-reveal

Since 1.0.0-dev.0
$tokens-reveal: (
                                
                                'transition': (
                                  'duration': $transition-duration,
                                  'timing': $transition-timing
                                )
                                
                              );

Description

Defines the base skin of the reveal component.

Type

variable

placeholders

tokens-reveal

Since 1.0.0-dev.0
%tokens-reveal { ... }

Description

Defines the base structure of the reveal component.

Requires

text

variables

tokens-text

Since 1.0.0
$tokens-text: (
                                
                                'body':     (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': $font-line-height,
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-dark,
                                  'text-align': left
                                ),
                                
                                'body-alt':     (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': 1.6429, // 23px
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-dark,
                                  'text-align': left
                                ),
                                
                                'lead': (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': 1.5, // 42px
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': color('blue', 'mid'),
                                  'text-align': left
                                ),
                                
                                'blockquote': (
                                  'font-weight': bold,
                                  'font-style': normal,
                                  'line-height': normal,
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': color('blue', 'mid'),
                                  'text-align': center
                                ),
                                
                                'listing': (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': 1.6364, // 36px
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-dark,
                                  'text-align': left
                                ),
                                
                                'accent': (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': 1.6111, // 29px
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-dark,
                                  'text-align': left
                                ),
                                
                                'button': (
                                  'font-weight': bold,
                                  'font-style': normal,
                                  'line-height': 1.6364, // 18px
                                  'letter-spacing': .05em,
                                  'text-transform': uppercase,
                                  'color': $color-text-dark,
                                  'text-align': left
                                ),
                                
                                'badge': (
                                  'font-weight': bold,
                                  'font-style': normal,
                                  'line-height': 1.6667, // 20px
                                  'letter-spacing': .05em,
                                  'text-transform': uppercase,
                                  'color': $color-text-dark,
                                  'text-align': left
                                ),
                                
                                'label': (
                                  'font-weight': bold,
                                  'font-style': normal,
                                  'line-height': 1.2, // 12px
                                  'letter-spacing': .11em,
                                  'text-transform': uppercase,
                                  'color': color('blue', 'dark'),
                                  'text-align': left
                                ),
                                
                                'data': (
                                  'font-weight': normal,
                                  'font-style': normal,
                                  'line-height': 1.6667, // 20px
                                  'letter-spacing': normal,
                                  'text-transform': none,
                                  'color': $color-text-dark,
                                  'text-align': left
                                ),
                                
                                'caption': (
                                  'font-weight': normal,
                                  'font-style': italic,
                                  'line-height': 1.5, // 24px,
                                  'text-transform': none,
                                  'color': $color-text-dark,
                                  'text-align': left
                                )
                                
                              );

Description

Defines the base skin of the text component.

Type

variable

Requires

mixins

tokens-text--font

Since 1.0.0
@mixin tokens-text--font($type, $skin) { ... }

Description

Defines the text token's font properties.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$type

The intended text type

string none
$skin

The token's skin

map none

Output

The heading component's font property

Requires

tokens-text--color

Since 1.0.0
@mixin tokens-text--color($type, $skin, $color: null) { ... }

Description

Defines the text token's color properties.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$type

The intended text type

string none
$skin

The token's skin

map none
$color

The desired text color

color

Output

The text component's font property

Requires

tokens-text review

Since 1.0.0
@mixin tokens-text($type, $color: null, $custom: ()) { ... }

Description

Builds a constructor for the text component.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$type

The intended text type

string none
$color

The desired text color

color
$custom

A custom skin for the component

map

Output

The native structure and skin of our text component

Requires

placeholders

tokens-text

Since 1.0.0
%tokens-text { ... }

Description

Defines the base structure of the text component.

Utilities

functions

functions

icon

Since 1.0.0
@function icon($id, $color: null, $size: null) { ... }

Description

Dynamically retrieves an icon from the icon folder by icon ID. Optionally allows the icon to be recolored or resized.

Parameters

function parameter Name function parameter Description function parameter Type function parameter Default value
$id

The ID of the icon

string none
$color

The desired color of the icon

color
$size

The desired size of the icon, either a single number or list of numbers representing width and height

number or list

Returns

The icon's path

Requires

icon-url

Since 1.0.0
@function icon-url($id, $color: null, $size: null) { ... }

Description

Dynamically retrieves an icon from the icon folder by icon ID. Optionally allows the icon to be recolored or resized.

Parameters

function parameter Name function parameter Description function parameter Type function parameter Default value
$id

The ID of the icon

string none
$color

The desired color of the icon

color
$size

The desired size of the icon, either a single number or list of numbers representing width and height

number or list

Returns

The icon's path as a URL

Requires

selector-excludes

Since 1.0.0
@function selector-excludes($excludes...) { ... }

Description

Builds a series of :not expressions that can be used to exclude selectors from another.

Parameters

function parameter Name function parameter Description function parameter Type function parameter Default value
$excludes

One or more expressions to be excluded from the target selector

arglist none

Returns

A :not exclusion expression

mixins

mixins

breakpoints

Since 1.0.0
@mixin breakpoints($breakpoints...) { ... }

Description

Build multiple media queries for multiple breakpoints at the same time.

Parameters

mixin parameter Name mixin parameter Description mixin parameter Type mixin parameter Default value
$breakpoints

The breakpoints for the media queries

arglist none

Requires

breakpoint-s

Since 1.0.0
@mixin breakpoint-s() { ... }

Description

A breakpoint shorthand to create a media query for small screens.

Parameters

None.

Requires

breakpoint-m

Since 1.0.0
@mixin breakpoint-m() { ... }

Description

A breakpoint shorthand to create a media query for medium screens.

Parameters

None.

Requires

breakpoint-l

Since 1.0.0
@mixin breakpoint-l() { ... }

Description

A breakpoint shorthand to create a media query for large screens.

Parameters

None.

Requires

breakpoint-xl

Since 1.0.0
@mixin breakpoint-xl() { ... }

Description

A breakpoint shorthand to create a media query for extra-large screens.

Parameters

None.

Requires

breakpoint-s-m

Since 1.0.0
@mixin breakpoint-s-m() { ... }

Description

A breakpoint shorthand to create a media query for small and medium screens.

Parameters

None.

Requires

breakpoint-s-m-l

Since 1.0.0
@mixin breakpoint-s-m-l() { ... }

Description

A breakpoint shorthand to create a media query for small, medium, and large screens.

Parameters

None.

Requires

breakpoint-m-l

Since 1.0.0
@mixin breakpoint-m-l() { ... }

Description

A breakpoint shorthand to create a media query for medium and large screens.

Parameters

None.

Requires

breakpoint-m-l-xl

Since 1.0.0
@mixin breakpoint-m-l-xl() { ... }

Description

A breakpoint shorthand to create a media query for medium, large, and extra-large screens.

Parameters

None.

Requires

breakpoint-l-xl

Since 1.0.0
@mixin breakpoint-l-xl() { ... }

Description

A breakpoint shorthand to create a media query for large and extra large screens.

Parameters

None.

Requires

v-transition-from

Since 1.0.0
@mixin v-transition-from() { ... }

Description

Helps create Vue.js transitions by setting the from state.

Parameters

None.

v-transition-to

Since 1.0.0
@mixin v-transition-to() { ... }

Description

Helps create Vue.js transitions by setting the to state.

Parameters

None.

v-transition-in-start

Since 1.0.0
@mixin v-transition-in-start() { ... }

Description

Helps create Vue.js entrance transitions by setting the starting state.

Parameters

None.

v-transition-in-end

Since 1.0.0
@mixin v-transition-in-end() { ... }

Description

Helps create Vue.js entrance transitions by setting the ending state.

Parameters

None.

v-transition-in-active

Since 1.0.0
@mixin v-transition-in-active() { ... }

Description

Helps create Vue.js entrance transitions by setting the active state.

Parameters

None.

v-transition-out-start

Since 1.0.0
@mixin v-transition-out-start() { ... }

Description

Helps create Vue.js exit transitions by setting the starting state.

Parameters

None.

v-transition-out-end

Since 1.0.0
@mixin v-transition-out-end() { ... }

Description

Helps create Vue.js exit transitions by setting the ending state.

Parameters

None.

v-transition-out-active

Since 1.0.0
@mixin v-transition-out-active() { ... }

Description

Helps create Vue.js exit transitions by setting the active state.

Parameters

None.

v-transition

Since 1.0.0
@mixin v-transition() { ... }

Description

Helps create Vue.js transitions by setting the start and end state.

Parameters

None.

v-transition-active

Since 1.0.0
@mixin v-transition-active() { ... }

Description

Helps create Vue.js transitions by setting the active state.

Parameters

None.

General

functions

layout-scale

Since 1.0.0
@function layout-scale($min, $max, $breakpoints: map-keys($screens)) { ... }

Description

Creates a new layout scale across breakpoints ranging from min to max layout sizes.

Parameters

function parameter Name function parameter Description function parameter Type function parameter Default value
$min

The minimum allowed layout size for the smallest breakpoint

number none
$max

The maximum allowed layout size for the largest breakpoint

number none
$breakpoints

The breakpoints that the layout should scale to.

list

Returns

A list of layout sizes for each breakpoint.

Requires

layout-breakpoints

Since 1.0.0
@function layout-breakpoints($scale, $breakpoints: map-keys($screens)) { ... }

Description

Maps a layout scale to a list of breakpoints.

Parameters

function parameter Name function parameter Description function parameter Type function parameter Default value
$scale

A layout scale.

list none
$breakpoints

The breakpoints that the layout should scale to.

list

Returns

A map of layout sizes for each breakpoint.

Requires

layout

Since 1.0.0
@function layout($min, $max, $breakpoints: map-keys($screens)) { ... }

Description

Generates a layout map given min and max layout sizes for a range of breakpoints.

Parameters

function parameter Name function parameter Description function parameter Type function parameter Default value
$min

The minimum allowed layout size for the smallest breakpoint

number none
$max

The maximum allowed layout size for the largest breakpoint

number none
$breakpoints

The breakpoints that the layout should scale to.

list

Returns

A map of layout sizes for each breakpoint.

Requires